中文輸入法不觸發(fā)onkeyup事件的解決辦法

更新時(shí)間：2014年07月09日 08:42:12 投稿：junjie

這篇文章主要介紹了中文輸入法不觸發(fā)onkeyup事件的解決辦法,需要的朋友可以參考下

這兩天做一個(gè)需要實(shí)時(shí)監(jiān)控文本框輸入的功能，碰到了中文輸入法無(wú)法觸發(fā)onkeyup事件的惡心問(wèn)題。

具體表現(xiàn)是這樣的：

當(dāng)監(jiān)聽(tīng)一個(gè)input的keyup的事件的時(shí)候,英文輸入法的情況下可以實(shí)時(shí)的通過(guò)keyup事件檢測(cè)到文本框value的變化，但是當(dāng)輸入法變成中文后，input的keyup事件就不會(huì)被正常觸發(fā)。這是最先前的寫法。

<html>
<head>
<script type="text/javascript" src="http://www.dhdzp.com/static/js/jquery-1.4.2.min.js"></script>
</head>
<body>
  <p>
    使用keyup事件檢測(cè)文本框內(nèi)容：
  </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>

如你所見(jiàn)，這樣的寫法遇到了中文不能觸發(fā)keyup事件的問(wèn)題。于是尋求解決方法，想起來(lái)baidu的搜索欄提示似乎是沒(méi)有這個(gè)問(wèn)題的，于是開(kāi)始看百度的js。百度的js比較難看...方法命名凈是一個(gè)字母，最后發(fā)現(xiàn)大概是使用了timeout做一個(gè)定時(shí)器來(lái)定時(shí)監(jiān)測(cè)input框的修改。不是很滿意這樣的方法。于是繼續(xù)查找看有沒(méi)有更好的解決辦法，于是就找到了oninput和onpropertychange兩個(gè)事件。

oninput是firefox下面可用，而onpropertychange則是ie下可用。兩個(gè)方法有著一些區(qū)別。

oninput只能檢測(cè)到value這個(gè)屬性的變化，而onpropertychange則可以檢測(cè)到包含value的所有屬性的變化。于是開(kāi)始改成這個(gè)樣子。

<html>
<head>
<script type="text/javascript" src="http://www.dhdzp.com/static/js/jquery-1.4.2.min.js"></script>
</head>
<body>
  <p>
    使用oninput以及onpropertychange事件檢測(cè)文本框內(nèi)容：
  </p>
  <p>
    <input type="text" name="inputorp_i" id="inputorp_i" autocomplete="off"/>
    <span id="inputorp_s"></span>
    <script type="text/javascript">
      //先判斷瀏覽器是不是萬(wàn)惡的IE，沒(méi)辦法，寫的東西也有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>

問(wèn)題這么被解決了。

您可能感興趣的文章: