這兩天做一個需要實時監(jiān)控文本框輸入的功能，碰到了中文輸入法無法觸發(fā)onkeyup事件的惡心問題。
具體表現(xiàn)是這樣的：
當監(jiān)聽一個input的keyup的事件的時候,英文輸入法的情況下可以實時的通過keyup事件檢測到文本框value的變化，但是當輸入法變成中文后，input的keyup事件就不會被正常觸發(fā)。這是最先前的寫法。
<html><head><script type="text/javascript" src="http://www.survivalescaperooms.com/static/js/jquery-1.4.2.min.js"></script></head><body> <p>使用keyup事件檢測文本框內(nèi)容： </p> <p><input type="text" autocomplete="off"/><span></span><script type="text/javascript">$('#keyup_i').bind('keyup', function(){$('#keyup_s').text($(this).val());})</script> </p></body></html>
如你所見，這樣的寫法遇到了中文不能觸發(fā)keyup事件的問題。于是尋求解決方法，想起來baidu的搜索欄提示似乎是沒有這個問題的，于是開始看百度的js。百度的js比較難看...方法命名凈是一個字母，最后發(fā)現(xiàn)大概是使用了timeout做一個定時器來定時監(jiān)測input框的修改。不是很滿意這樣的方法。于是繼續(xù)查找看有沒有更好的解決辦法，于是就找到了oninput和onpropertychange兩個事件。
oninput是firefox下面可用，而onpropertychange則是ie下可用。兩個方法有著一些區(qū)別。
oninput只能檢測到value這個屬性的變化，而onpropertychange則可以檢測到包含value的所有屬性的變化。于是開始改成這個樣子。
<html><head><script type="text/javascript" src="http://www.survivalescaperooms.com/static/js/jquery-1.4.2.min.js"></script></head><body> <p>使用oninput以及onpropertychange事件檢測文本框內(nèi)容： </p> <p><input type="text" autocomplete="off"/><span></span><script type="text/javascript">//先判斷瀏覽器是不是萬惡的IE，沒辦法，寫的東西也有IE使用者var bind_name = 'input';if (navigator.userAgent.indexOf("MSIE") != -1){bind_name = 'propertychange';}$('#inputorp_i').bind(bind_name, function(){$('#inputorp_s').text($(this).val());})</script> </p></body></html>
問題這么被解決了。
新聞熱點
疑難解答
圖片精選
