以往 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. 『性能』测试一下 MSSqlHelper 的性能

    本文没啥技术含量,就是测试一下 MSSqlHelper 在 使用反射.不使用反射 的性能对比. 之后,不要问为什么不用 ORM 这类的东西 —— 会有另外的文章 介绍 自己这些年 自己的ORM 升级历 ...

  2. Dotnet全平台下APM-Trace探索

    背景 随着支撑的内部业务系统越来越多,向着服务化架构进化,在整个迭代过程中,会逐渐暴露出以下问题. 传统依赖于应用服务器日志等手段的排除故障原因的复杂度越来越高,传统的监控服务已经无法满足需求. 终端 ...

  3. 设计模式之创建类模式PK

    创建类模式包括: 工厂方法模式 建造者模式 抽象工厂模式 单例模式 原型模式 创建类模式能够提供对象的创建和管理职责. 其中单例模式和原型模式非常容易理解, 单例模式是要保持在内存中只有一个对象,原型 ...

  4. 02. Install redis on Linux

    安装下载redis,参考官方文档:https://redis.io/download 下载: shell>wget http://download.redis.io/releases/redis ...

  5. 安卓开发笔记（十二）：SQLite数据库储存（上）

    SQLite数据库存储(上) 创建数据库 Android专门提供了一个 SQLiteOpenHelper帮助类对数据库进行创建和升级 SQLiteOpenHelper需要创建一个自己的帮助类去继承它并 ...

  6. java：比赛中常用方法整理——字符串（基础）

    一.将字符串转化为字符数组: toCharArray返回一个字符数组. char[] a=J.toCharArray(); 二.字符串的长度 字符串的长度和字符数组的长度是不一'样'的. 字符串长度( ...

  7. sqlite数据库如何远程连接?

    sqlite数据库如何远程连接代码如下:QSqlDatabase db =QSqlDatabase::addDatabase("QSQLITE"); db.setHostName( ...

  8. python线程（二）代码部分

    使用threading创建线程: from threading import Thread def work(name): print(f"我是线程{name}") if __na ...

  9. Golang随机数生成

    需求:10以内随机生成2个幸运数字 package main import ( "fmt" "math/rand" ) func main() { fmt.Pr ...

  10. ReactiveSwift源码解析(三) Signal代码的基本实现

    上篇博客我们详细的聊了ReactiveSwift源码中的Bag容器,详情请参见<ReactiveSwift源码解析之Bag容器>.本篇博客我们就来聊一下信号量,也就是Signal的的几种状 ...