以往 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. [Hyperledger] Fabric系统中 peer模块的 gossip服务详解

    最近一直在看fabric系统中的核心模块之一——peer模块.在看peer的配置文件core.yaml的信息时,对其中的gossip配置选项很感兴趣.看了一上午,还是不能明白这个选项到底什么意思呢?表 ...

  2. Gradle入门到实战(二) — ImageOptimization安卓图片转换压缩插件

    上一篇我们了解了Gradle的各个方面,本篇介绍一款安卓图片优化转换插件,目前已在项目中使用,可一键批量转换压缩图片,webp转换与png/jpg压缩就是那么简单 GitHub项目地址:ImageOp ...

  3. MobileForm控件的使用方式-用.NET（C#）开发APP的学习日志

    今天继续Smobiler开发APP的学习日志,这次是做一个title.toolbar.侧边栏三种效果 样式一 一.          Toolbar 1.       目标样式 我们要实现上图中的效果 ...

  4. C# 将object对象转换为实体对象

    C# 将object对象转换为实体对象.一共两种方法. 第一种方法,代码如下: /// <summary> /// 将object对象转换为实体对象 /// </summary> ...

  5. 用animation的steps属性制作帧动画

    昨天火急火燎地接到一个任务,说是要做一个掷骰子的游戏,关于掷骰子期间的过渡动画,我本来是想用css 3d制作一个立体的骰子,然后叫UI给6张平面图贴上去.再用translate3d来操作.然而UI考虑 ...

  6. XSS Challenges xss-quiz.int21h.jp

    概述: https://xss-quiz.int21h.jp/ Stage #1 payload: <script>alert(document.domain);</script&g ...

  7. 【原】Java学习笔记034 - 网络

    package cn.temptation; import java.net.InetAddress; public class Sample01 { public static void main( ...

  8. ReactNative之结合具体示例来看RN中的的Timing动画

    今天继续更新RN相关的博客.上篇博客详细的聊了RN中关于Flex布局的相关东西,具体请参见<ReactNative之参照具体示例来看RN中的FlexBox布局>.本篇博客继续更新RN的动画 ...

  9. Android Studio导出JavaDoc时中文乱码问题解决

    导出过程中,如果出现JavaDoc中文乱码的问题,可以在Other command line arguments栏目添加命令参数:-encoding UTF-8 -charset UTF-8(如果是G ...

  10. 一份非常完整的MySQL规范

    一.数据库命令规范 所有数据库对象名称必须使用小写字母并用下划线分割 所有数据库对象名称禁止使用mysql保留关键字(如果表名中包含关键字查询时,需要将其用单引号括起来) 数据库对象的命名要能做到见名 ...