Solution à la méthode de saisie chinoise ne déclenchant pas l'événement onkeyup

Solution à la méthode de saisie chinoise ne déclenchant pas l'événement onkeyup_Connaissances de base

WBOY

Libérer： 2016-05-16 16:42:16

original

1759 Les gens l'ont consulté

Au cours des deux derniers jours, j'ai travaillé sur une fonction qui nécessite une surveillance en temps réel de la saisie dans la zone de texte et j'ai rencontré le problème dégoûtant que la méthode de saisie chinoise ne peut pas déclencher l'événement onkeyup.

Les performances spécifiques sont les suivantes :

Lors de l'écoute de l'événement keyup d'une entrée, dans le cas de la méthode de saisie anglaise, le changement de la valeur de la zone de texte peut être détecté en temps réel via l'événement keyup. Cependant, lorsque la méthode de saisie passe à. Chinois, l'événement keyup de l'entrée ne sera pas déclenché normalement. C'est la première façon de l'écrire.

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

Copier après la connexion

Comme vous pouvez le voir, cette façon d'écrire rencontre le problème que l'événement keyup ne peut pas être déclenché en chinois. J'ai donc cherché une solution. Je me suis souvenu que l'invite de la barre de recherche de Baidu ne semblait pas avoir ce problème, alors j'ai commencé à regarder le js de Baidu. Le js de Baidu est plutôt moche... Les noms de méthodes sont tous constitués d'une seule lettre. Au final, j'ai découvert que j'utilisais probablement timeout pour créer un timer afin de surveiller régulièrement la modification de la zone de saisie. Pas très satisfait de cette méthode. J'ai donc continué à chercher pour voir s'il y avait une meilleure solution et j'ai trouvé les deux événements oninput et onpropertychange.

oninput est disponible sous Firefox, tandis que onpropertychange est disponible sous ie. Il existe quelques différences entre les deux méthodes.

oninput ne peut détecter que les modifications dans l'attribut value, tandis que onpropertychange peut détecter les modifications dans toutes les propriétés contenant une valeur. J'ai donc commencé à le changer pour ceci.

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

Copier après la connexion

Le problème est résolu.