DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> JavaScript入門知識 >> JavaScript基礎知識 >> 中文輸入法不觸發onkeyup事件的解決辦法
中文輸入法不觸發onkeyup事件的解決辦法
編輯:JavaScript基礎知識     

這兩天做一個需要實時監控文本框輸入的功能,碰到了中文輸入法無法觸發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>

問題這麼被解決了。

XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved