Lösung für die chinesische Eingabemethode, die das Ereignis „onkeyup' nicht auslöst

Lösung für die chinesische Eingabemethode, die das Ereignis „onkeyup' nicht auslöst_Grundkenntnisse

WBOY

Freigeben： 2016-05-16 16:42:16

Original

1783 Leute haben es durchsucht

In den letzten zwei Tagen habe ich an einer Funktion gearbeitet, die eine Echtzeitüberwachung der Textfeldeingabe erfordert, und bin auf das widerliche Problem gestoßen, dass die chinesische Eingabemethode das Onkeyup-Ereignis nicht auslösen kann.

Die spezifische Leistung ist wie folgt:

Beim Abhören des Keyup-Ereignisses einer Eingabe kann bei der englischen Eingabemethode die Änderung des Werts des Textfelds in Echtzeit durch das Keyup-Ereignis erkannt werden Chinesisch: Das Keyup-Ereignis der Eingabe wird nicht normal ausgelöst. Dies ist die früheste Art, es zu schreiben.

<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>

Nach dem Login kopieren

Wie Sie sehen, besteht bei dieser Schreibweise das Problem, dass das Keyup-Ereignis auf Chinesisch nicht ausgelöst werden kann. Also suchte ich nach einer Lösung. Mir fiel ein, dass die Eingabeaufforderung in der Suchleiste von Baidu dieses Problem anscheinend nicht aufwies, also begann ich, mir Baidus js anzusehen. Baidus js ist ziemlich hässlich ... Die Methodennamen bestehen alle aus einem Buchstaben. Am Ende habe ich herausgefunden, dass ich wahrscheinlich Timeout verwendet habe, um einen Timer zu erstellen, der die Änderung des Eingabefelds regelmäßig überwacht. Ich bin mit dieser Methode nicht sehr zufrieden. Also suchte ich weiter nach einer besseren Lösung und fand die beiden Ereignisse oninput und onpropertychange.

oninput ist unter Firefox verfügbar, während onpropertychange unter ie verfügbar ist. Es gibt einige Unterschiede zwischen den beiden Methoden.

oninput kann nur Änderungen im Wertattribut erkennen, während onpropertychange Änderungen in allen Eigenschaften erkennen kann, die einen Wert enthalten. Also habe ich angefangen, es dahingehend zu ändern.

<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>

Nach dem Login kopieren

Das Problem ist gelöst.