1. 程式人生 > >input 內容改變的觸發事件

input 內容改變的觸發事件

input 內容改變的觸發事件

1. onchange

 

onchange 事件會在域的內容改變時觸發。支援的標籤<input type="text">, <textarea>, <select>,<keygen>。

注意:在元素的值改變了且失去焦點時觸發(兩次的值一樣不會觸發)。

缺陷:通過js程式碼改變DOM的值不會觸發,解決在js程式碼裡改值了呼叫其change 的function() 或者調.change()方法。

JS: 

<input type="text" id="cc" onchange="function()
">

JQuery:

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

 

 

2. onpropertychange

 

onpropertychange會實時觸發,會在元素的屬性改變時就觸發事件。當元素disable=true時不會觸發。

缺陷:只在IE 下支援,其他瀏覽器不支援,用oninput來解決。

JS: 

<input type="text" id="cc" onpropertychange="functionName()">

 

3. oninput

 

oninput在<input>或<textarea>的值發生改變時觸發,不需要等到元素失去焦點,是實時的。它是HTML5的事件,可用於檢測文字類輸入框的值。

缺陷:從指令碼中修改值不會觸發事件。從瀏覽器下拉提示框裡選取值時不會觸發。IE9 以下不支援,所以IE9以下可用onpropertychange 事件代替。

JS:

<input type="text" oninput="functionName()">

JQuery: 

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

 

4. addEventListener

 

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

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

https://www.cnblogs.com/littlesummer/p/6428116.html