實時監控input輸入值變化


在web開發中,我們有時會需要動態監聽輸入框值的變化,當使用onkeydown、onkeypress、onkeyup作為監聽事件時,會發現一些復制粘貼等操作用不了,同時,在處理組合快鍵鍵的時候也很麻煩。這時候我們需要更專業的解決方案:HTML5標准事件oninput、onchange和IE專屬的事件properchange。

1.oninput&onchange:

oninput和onchange都是事件對象,當輸入框的值發生改變時觸發該事件。不同的是,oninput是在值改變時立即觸發,而onchange是在值改變后失去焦點才觸發,並且可以用在非輸入框中,如:select等。
 

2.propertychange:

功能同oninput,用以替代oninput在IE9以下的不兼容性。
 

3.output:

output是一個HTML5標簽,IE系列瀏覽不兼容,主要用於計算輸出。如:

propertychange 和 input 事件:

1)propertychange只要當前對象的屬性發生改變就會觸發該事件

2)input是標准的瀏覽器事件,一般應用於input元素,當input的value發生變化就會發生,無論是鍵盤輸入還是鼠標黏貼的改變都能及時監聽到變化

$(function(){ 

    $('#username').bind('input propertychange', function() {  

    $('#result').html($(this).val().length + ' characters');  

  });  

})  

這里bind同時綁定了input和propertychange兩個方法。

轉:http://www.codes51.com/article/detail_3922282.html

 


免責聲明!

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



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