中文輸入法不觸發onkeyup事件的解決方法_基礎知識
- WBOY原創
- 2016-05-16 16:42:161778瀏覽
這兩天做一個需要即時監控文字方塊輸入的功能，碰到了中文輸入法無法觸發onkeyup事件的噁心問題。
具體表現是這樣的：
當監聽一個input的keyup的事件的時候,英文輸入法的情況下可以實時的通過keyup事件檢測到文本框value的變化，但是當輸入法變成中文後，input的keyup事件就不會被正常觸發。這是最先前的寫法。
<html>
<head>
<script type="text/javascript" src="http://www.jb51.net/static/js/jquery-1.4.2.min.js"></script>
</head>
<body>
<p>
使用keyup事件检测文本框内容：
</p>
<p>
<input type="text" name="keyup_i" id="keyup_i" autocomplete="off"/>
<span id="keyup_s"></span>
<script type="text/javascript">
$('#keyup_i').bind('keyup', function(){
$('#keyup_s').text($(this).val());
})
</script>
</p>
</body>
</html>
如你所見，這樣的寫法遇到了中文不能觸發keyup事件的問題。於是尋求解決方法，想起來baidu的搜尋欄提示似乎是沒有這個問題的，於是開始看百度的js。百度的js比較難看...方法命名淨是一個字母，最後發現大概是使用了timeout做一個定時器來定時監測input框的修改。不是很滿意這樣的方法。於是繼續找看有沒有更好的解決方法，於是就找到了oninput和onpropertychange兩個事件。
oninput是firefox下面可用，而onpropertychange則是ie下可用。兩個方法有一些差異。
oninput只能偵測到value這個屬性的變化，而onpropertychange則可以偵測到包含value的所有屬性的變化。於是開始改成這個樣子。
<html>
<head>
<script type="text/javascript" src="http://www.jb51.net/static/js/jquery-1.4.2.min.js"></script>
</head>
<body>
<p>
使用oninput以及onpropertychange事件检测文本框内容：
</p>
<p>
<input type="text" name="inputorp_i" id="inputorp_i" autocomplete="off"/>
<span id="inputorp_s"></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>
問題這麼被解決了。
陳述：
本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn