關於input內容改變的觸發時間


1、onchange

onchange 事件會在域的內容改變時觸發。支持的標簽<input type="text">, <textarea>, <select>,<keygen>。
注意:在元素的值改變了且失去焦點時觸發(兩次的值一樣不會觸發)。
缺陷:通過js代碼改變DOM的值不會觸發,解決在js代碼里改值了調用其change 的 function() 或者調.change()方法。
JS: 
<input type="text" id="cash" onchange="function()">

JQuery:

$("#cash").change(function(){});

 

2、onpropertychange

onpropertychange會實時觸發,會在元素的屬性改變時就觸發事件。當元素disable=true時不會觸發。
缺陷:只在IE 下支持,其他瀏覽器不支持,用oninput來解決。
JS: 
<input type="text" id="cash" onpropertychange="functionName()">

 

3、oninput

oninput在<input>或<textarea>的值發生改變時觸發,不需要等到元素失去焦點,是實時的。它是HTML5的事件,可用於檢測文本類輸入框的值。
缺陷:從腳本中修改值不會觸發事件。從瀏覽器下拉提示框里選取值時不會觸發。IE9 以下不支持,所以IE9以下可用onpropertychange 事件代替。
解決:通過js代碼改變DOM的值不會觸發,解決在js代碼里改值了調用其oninput 的 functionName() 方法。
JS:
<input type="text" oninput="functionName()">

JQuery: 

$("#cash").on('input propertychange',functionName);

 

4、addEventListener

addEventListener()用於向指定元素添加事件方法。使用removeEventListener()移除添加的事件方法。IE9以下不支持,用attachEvent代替。

語法: element.addEventListener(event, function, useCapture)


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM