以往 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. [转载]学习Javascript闭包(Closure)

    学习Javascript闭包(Closure)     源地址: http://www.ruanyifeng.com/blog/2009/08/learning_javascript_closures ...

  2. 关于 JavaScript 中的继承

    ES5 之前,继续是这样实现的 function Parent() { this.foo = function() { console.log('foo'); }; } Parent.prototyp ...

  3. 个人简历模板web

    根据自己以前使用的简单简历表格,对其进行了web前端还原,也算对自己初步学习知识的一个小小的记录. 下面是简历预览效果,很简洁的那种: 代码中没什么太困难的地方,主要记录下自己遇到的几个小问题吧: 1 ...

  4. 微信小程序 组件通信相关知识整理

    1.自定义组件间通信与事件 https://developers.weixin.qq.com/miniprogram/dev/framework/custom-component/events.htm ...

  5. Go map实现原理

    map结构 整体为一个数组,数组每个元素可以理解成一个槽,槽是一个链表结构,槽的每个节点可存8个元素,搞清楚了map的结构,想想对应的增删改查操作也不是那么难

  6. 关于.net导出数据到excel/word【占位符替换】

    1]excel的占位符替换 效果如图 关键代码: ///savedFilePath需要保存的路径 templateDocPath模板路径 替换的关键字和值 格式 [姓名]$%$小王 public st ...

  7. C# 跳转新的标签页

    ///这个是拿别人的,找到好多这个方法,溜了,不知道谁是原创 protected void btnPrint_Click(object sender, EventArgs e)        {    ...

  8. Spring Boot入门(三):使用Scheduled注解实现定时任务

    在程序开发的过程中,经常会使用定时任务来实现一些功能,比如: 系统依赖于外部系统的非核心数据,可以定时同步 系统内部一些非核心数据的统计计算,可以定时计算 系统内部的一些接口,需要间隔几分钟或者几秒执 ...

  9. DateUtil日期工具类

    目录 (1)需要导入的包 (2)DateUtil类 (1)需要导入的包 主要用于Strings.isNullOrEmpty(date) <!--string处理类--> <depen ...

  10. 如何在Microsoft Word里面插入图片作为背景/封面?

    Stay hungry, Stay foolish.     如何在Word里面插入图片作为背景?其实很简单,开门见山,我们只需要这几步即可! 1.第一步,打开要插入图片的Word 2.第二步,插入图 ...