以往 HTML 的 input 輸入框，無法即時反映使用者的輸入內容。
onkeyup、onkeydown 事件，無法即時、精確地取得使用者的輸入資料；而 onchange、onblur 事件，要等到失去焦點時，或按下 Enter 時，才會被觸發。

現在 HTML5 新增的 input 事件，可達成「立即、精準地觸發」，類似 AJAX 功能。唯一的缺點，是不支援 IE 瀏覽器，但支援其他各瀏覽器。

如下 html 程式碼，可測試出，input 事件可達成「立即、精準地觸發」；舊有的 change 事件，則需要失去焦點時，或按下 Enter 時，才會被觸發。

 <!DOCTYPE html>

 <html >

 <head>

     <script>

         function myFunc1(input) {

             document.getElementById("output1").value = input;

         }

         function myFunc2(input) {

             document.getElementById("output2").value = input;

         }

     </script>

 </head>

 <body>

     <input id="input1" type="text" oninput="myFunc1(this.value)" />

     <br />

     <input id="input2" type="text" onchange="myFunc2(this.value)" />

     <p></p>

     <output id="output1"></output>

     <br />

     <output id="output2"></output>

 </body>

 </html>

oninput、onchange 比較

進一步聯想，若寫的是: 購物商場、網路書城，若要讓 input 或 textarea 輸入框，能夠「立即、精準地觸發」，只要使用 HTML5 的 input 事件，則不必自己寫程式去加入 AJAX 功能，就能輸鬆地達成需求。

如下 html 程式碼：

 <!DOCTYPE html>

 <html >

 <head>

     <title>oninput</title>

     <script>

         function myFunc1(input) {

             document.getElementById("output1").value =

                 input * 230;

         }

     </script>

 </head>

 <body>

     書名:快快樂樂學HTML5, <br />

     價格:230, 購買數量:

     <input id="input1" type="number" step="1" value="0" oninput="myFunc1(this.value)" />

     <br /><br />

     結帳金額:

     <output id="output1"></output>

 </body>

 </html>


圖 1　執行結果

HTML5 的 input 事件，主要的缺點，是不支援微軟的 IE 瀏覽器，但支援 Chrome、Firefox、Opera、Safari、微軟的 Edge。
因此在網頁裡，引用此事件，對手機、平板上的操作，並不造成影響。
--------------------------------------------
--------------------------------------------
參考書籍：

[1] HTML5 完美風暴（第三版）, ch5, 作者:呂高旭
http://www.books.com.tw/products/0010668517
--------------------------------------------
相關文章：

[1] HTML 事件属性
http://www.runoob.com/jsref/event-oninput.html
http://www.w3school.com.cn/tags/html_ref_eventattributes.asp

[2] HTML5 input 事件检测输入框变化
http://www.cnblogs.com/luozhihao/p/4649868.html

[3] HTML5 标准事件 oninput 实现输入检测
https://www.fedte.cc/p/604.html
--------------------------------------------
--------------------------------------------

HTML5 新增的 input 事件的更多相关文章

  1. HTML5 input事件检测输入框变化

    之前一直用change事件来监听输入框内容是否发生变化,只有当输入框失去焦点时才会触发,没想到html5还有个input事件,只要输入框内容发生变化就会立即触发,既然有这么好的东西我们干嘛放着不用呢, ...

  2. 玩转html5(一)-----盘点html5新增的那些酷酷的input类型和属性

    今天正式开始学习html5了,相比html以前的版本,html5新增了好多功能,属性,使我们做出来的界面更加的绚丽,而且使用起来超级简单,这篇文章先来说说html增加的那些input类型和属性. 这些 ...

  3. HTML5 input事件检测输入框变化[转载]

    原文:http://www.linuxidc.com/Linux/2015-07/119984.htm 之前一直用change事件来监听输入框内容是否发生变化,只有当输入框失去焦点时才会触发,没想到h ...

  4. HTML5新增的一些属性和功能之一

    大致可以分为10个方面: HTML5表单元素和属性 表单2.0 视音频处理 canvas绘图 SVG绘图 地理定位 拖放技术 web work web storage web socket 一.新的i ...

  5. h5手机摇一摇功能实现：基于html5重力感应DeviceMotionEvent事件监听手机摇晃

    DeviceMotionEven是html5提供的一个用来获取设备物理方向及运动的信息(比如陀螺仪.罗盘及加速计)的Dom事件,事件描述如下: deviceorientation:提供设备的物理方向信 ...

  6. HTML5新增的一些属性和功能之六——拖拽事件

    拖放事件的前提是分为源对象和目标对象,你鼠标拖着的是源对象,你要放置的位置是目标对象,区分这两个对象是因为HTML5的拖放事件对两者是不同的. 被拖动的源对象可以触发的事件: 1).ondragsta ...

  7. HTML5 学习总结（二）——HTML5新增属性与表单元素

    一.HTML5新增属性 1.1.contextmenu contextmenu的作用是指定右键菜单. <!DOCTYPE html> <html> <head> & ...

  8. HTML5 学习笔记（二）——HTML5新增属性与表单元素

    目录 一.HTML5新增属性 1.1.contextmenu 1.2.contentEditable 1.3.hidden 1.4.draggable 1.5.data-* 1.6.placehold ...

  9. HTML5新增标签与属性

    目录 一.HTML5新增属性 1.1.contextmenu 1.2.contentEditable 1.3.hidden 1.4.draggable 1.5.data-* 1.6.placehold ...

随机推荐

  1. Scrapy爬取Ajax（异步加载）网页实例——简书付费连载

    这两天学习了Scrapy爬虫框架的基本使用,练习的例子爬取的都是传统的直接加载完网页的内容,就想试试爬取用Ajax技术加载的网页. 这里以简书里的优选连载网页为例分享一下我的爬取过程. 网址为: ht ...

  2. MySQL5.7下面，误操作导致的drop table db1.tb1; 的恢复方法：

    MySQL5.7下面,误操作导致的drop table db1.tb1; 的恢复方法: 0.停业务数据写入.[iptables封禁] 1.从备份服务器上拉取最新的一个全备文件,恢复到一个临时的服务器上 ...

  3. Vue基本使用

    Vue.js是一款流行的开源JavaScript前端框架,旨在更好地组织与简化Web开发.Vue所关注的核心是MVC模式中的视图层,同时,它也能方便地获取数据更新,并通过组件内部特定的方法实现视图与模 ...

  4. vue 设计一个倒计时秒杀的组件

    简介: 倒计时秒杀组件在电商网站中层出不穷  不过思路万变不离其踪,我自己根据其他资料设计了一个vue版的 核心思路:1.时间不能是本地客户端的时间  必须是服务器的时间这里用一个settimeout ...

  5. 轻松搞定表白女朋友：Android版APP （零基础也可直接下载软件）

    在我们平时生活当中,经常会看到一些表白女朋友的html网页,但是Android端的表白软件可以说是基本没有,笔者在全网搜了一下,就没有一个可以用的.安卓端可以给人一种定制和精美的感觉,这是网页所做不到 ...

  6. centos7 ambari安装HDP

    环境介绍:操作系统为Centos7.1:测试设备全部为内网设备,不通公网,所以需要配置本地yum源: 首先安装ansible工具,用来批量安装ambari.java以及基础的一些配置: 一. 免密钥登 ...

  7. PostgreSQL 10.7 linux 主从配置

    PostgreSQL 10.7 主从安装 硬件环境 云服务商:华为云 Linux: CentOS7.1 工具:Xshell Xftp IP:114.115.251.168 Port: 5432 543 ...

  8. Windows Server 2012 R2 安装密钥（只适用安装，不支持激活）

    标准版 = NB4WH-BBBYV-3MPPC-9RCMV-46XCB 数据中心版 = BH9T4-4N7CW-67J3M-64J36-WW98Y

  9. 史上最全的springboot导出pdf文件

    最近项目有一个导出报表文件的需求,我脑中闪过第一念头就是导出pdf(产品经理没有硬性规定导出excel还是pdf文件),于是赶紧上网查看相关的资料,直到踩了无数的坑把功能做出来了才知道其实导出exce ...

  10. php实现中文字符串无乱码截取

    在PHP开发中会经常用到字符串截取,有的时候字符串截取会出现乱码的情况,那么怎么解决这个问题呢,其实也很容易 首先我们要了解关于中英文占多少字节的问题. ASCII码:一个中文汉字占两个字节的空间. ...