HTML5 新增的 input 事件
以往 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 事件检测输入框变化
https://www.geek-share.com/detail/2647975340.html
[3] HTML5 标准事件 oninput 实现输入检测
https://www.fedte.cc/p/604.html
--------------------------------------------
--------------------------------------------
- HTML5 新增事件与以前事件对比
- HTML5新增的input元素的type
- html5 新增input类型与属性
- html5学习笔记二-新增input 类型
- HTML5新增input输入的list属性的使用
- HTML5中input标签新增的类型
- HTML5--表单标签input新增type值
- HTML5 INPUT新增属性
- 玩转html5(一)-----盘点html5新增的那些酷酷的input类型和属性
- html5 新增的input元素
- HTML5中新增的input类型及其属性
- HTML5新增的INPUT输入类型
- HTML5 input元素新增和改良的类型与其js验证
- HTML5新增的8类INPUT输入类型介绍
- HTML5 input新增属性
- 玩转html5(一)-----盘点html5新增的那些酷酷的input类型和属性
- 初学HTML5系列二:HTML5新增的事件属性
- HTML5新增input元素的类型
- Html5新增和改良的input元素