html5與js關於input[type='text']文字框value改變觸發事件一些屬性的區別oninput,onpropertychange,onchange和文字框的value點擊全選狀態onclick="select();"。做購物車頁面時會要用到。

標籤：val   listener   也會   select   disable   點擊   value   rip   用法   

關於input[type=‘text‘]文字框value改變觸發事件一些屬性的區別oninput,onpropertychange,onchange和文字框的點擊全選狀態onclick="select();"。做購物車頁面時會要用到。

• input[type=‘text‘]文字框value改變觸發事件一些屬性的區別oninput,onpropertychange,onchange：

1、onchange事件與onpropertychange事件的區別：
onchange事件在內容改變（兩次內容有可能還是相等的）且失去焦點時觸發；onpropertychange事件卻是即時觸發，即每增加或刪除一個字元就會觸發，通過js改變也會觸發該事件，但是該事件IE專有。
2、oninput事件與onpropertychange事件的區別：
oninput事件是IE之外的大多數瀏覽器支援的事件，在value改變時觸發，即時的，即每增加或刪除一個字元就會觸發，然而通過js改變value時，卻不會觸發；onpropertychange事件是任何屬性改變都會觸發的，而oninput卻只在value改變時觸發，oninput要通過addEventListener()來註冊，onpropertychange註冊方式跟一般事件一樣。（此處都是指在js中動態綁定事件，以實現內容與行為分離）
3、oninput與onpropertychange失效的情況：
（1）oninput事件：a). 當指令碼中改變value時，不會觸發；b). 從瀏覽器的自動下拉提示中選取時，不會觸發。
（2）onpropertychange事件：當input設定為disable=true後，onpropertychange不會觸發。

代表用法：

var oInput_text = document.getElementsByTagName(‘input‘);
oInput_text.oninput = function(){
　　alert(‘你要動我？？‘);
}；

 

• 文字框的點擊全選狀態onclick="select();"

用法1：直接html標籤裡添加：<input type="text" onclick="select();" value="點擊全選">

用法2：js添加點擊屬性：        

var oInput_text = document.getElementsByTagName(‘input‘);
oInput_text.onclick = function(){             oInput_text.select();
 };

 

html5與js關於input[type='text']文字框value改變觸發事件一些屬性的區別oninput,onpropertychange,onchange和文字框的value點擊全選狀態onclick="select();"。做購物車頁面時會要用到。