監聽input、textarea輸入框值變化的知識
阿新 • • 發佈：2019-02-15
在document的input輸入框、textarea輸入框(不管是現在的元素還是將來要新增的元素)上面繫結input propertychange事件。
實時監聽輸入框值變化的完美方案：oninput & onpropertychange
在Web開發中經常會碰到需要動態監聽輸入框值變化的情況，如果使用 onkeydown、onkeypress、onkeyup
這個幾個鍵盤事件來監測的話，監聽不了右鍵的複製、剪貼和貼上這些操作，處理組合快捷鍵也很麻煩。因此這篇文章向大家介紹一種完美的解決方案：結合HTML5標準事件
oninput 和 IE 專屬事件 onpropertychange 事件來監聽輸入框值變化。
oninput 是HTML5的標準事件，對於檢測textarea，input:text, input:password和input:search這幾個元素通過使用者介面發生的內容變化非常有用，在內容修改後立即被觸發，不像onchange事件需要失去焦點才觸發。
集合 oninput & onpropertychange 監聽輸入框內容變化的示例程式碼如下：
}); $(document).on('input propertychange', 'input', function() { //function code.... alert("input change"); }); $(document).on('input propertychange', 'textarea', function() { //function code
alert('input textarea change'); }); 上面是知識介紹，後面有很好的例子再新增上來吧。
oninput 是HTML5的標準事件，對於檢測textarea，input:text, input:password和input:search這幾個元素通過使用者介面發生的內容變化非常有用，在內容修改後立即被觸發，不像onchange事件需要失去焦點才觸發。
- 修改了 input:checkbox 或者 input:radio 元素的選擇中狀態， checked 屬性發生變化。
- 修改了 input:text 或者 textarea 元素的值，value 屬性發生變化。
- 修改了 select 元素的選中項，selectedIndex 屬性發生變化。
集合 oninput & onpropertychange 監聽輸入框內容變化的示例程式碼如下：
<head>
<script
type="text/javascript">
//
Firefox, Google Chrome, Opera, Safari, Internet Explorer from version 9
functionOnInput
(event) {
alert
("The new content: "+
event.target.value);
}
//
Internet Explorer
functionOnPropChanged
(event) {if(event.propertyName.toLowerCase
() =="value")
{
alert
("The new content: "+
event.srcElement.value);
}
}
</script>
</head>
<body>
Please
modify the contents of the text field.
<input
type="text"oninput="OnInput
(event)"onpropertychange="OnPropChanged
(event)"value="Text
field"/>
</body>
使用 jQuery 庫的話，只需要同時繫結
oninput 和 onpropertychange 兩個事件就可以了，示例程式碼如下：
$('textarea').bind('input
propertychange',function()
{
$('.msg').html($(this).val().length
+' characters');
});
最後需要注意的是：oninput和onpropertychange這兩個事件在 IE9 中都有個小BUG，那就是通過右鍵選單選單中的剪下和刪除命令刪除內容的時候不會觸發，而 IE 其他版本都是正常的，目前還沒有很好的解決方案。不過 oninput & onpropertychange 仍然是監聽輸入框值變化的最佳方案，如果大家有更好的方法，歡迎參與討論。
使用jquery的程式碼如下：
$(document).on('focus', 'input', function() { //function code here. alert("input focus!"); }); $(document).on('blur', 'input', function() { //function code here. alert("input blur!");}); $(document).on('input propertychange', 'input', function() { //function code.... alert("input change"); }); $(document).on('input propertychange', 'textarea', function() { //function code
alert('input textarea change'); }); 上面是知識介紹，後面有很好的例子再新增上來吧。