中国語入力メソッドでonkeyupイベントが発生しない場合の解決策

中国語入力メソッドでonkeyupイベントが発生しない場合の解決策_基礎知識

WBOY

リリース： 2016-05-16 16:42:16

オリジナル

1725 人が閲覧しました

過去 2 日間、私はテキストボックスの入力をリアルタイムで監視する必要がある機能に取り組んでいたのですが、中国語の入力メソッドが onkeyup イベントをトリガーできないという忌まわしい問題に遭遇しました。

具体的なパフォーマンスは次のとおりです:

入力のキーアップイベントをリッスンする場合、英語入力メソッドの場合、テキストボックスの値の変化はキーアップイベントを通じてリアルタイムに検出できますが、入力メソッドが変更されたとき。中国語では、入力のキーアップイベントが正常にトリガーされません。これが一番早い書き方です。

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

ログイン後にコピー

ご覧のとおり、この書き方では中国語ではキーアップイベントをトリガーできないという問題が発生します。そこで解決策を探しましたが、Baidu の検索バープロンプトにはこの問題がないようだったので、Baidu の js を調べ始めました。 Baidu の js はかなり醜いです...メソッド名はすべて 1 文字です。最終的に、入力ボックスの変更を定期的に監視するタイマーを作成するために timeout を使用していることがわかりました。この方法にはあまり満足していません。そこで、より良い解決策がないか探し続けたところ、oninput と onpropertychange の 2 つのイベントを見つけました。

oninput は Firefox で使用でき、onpropertychange は ie で使用できます。 2 つの方法にはいくつかの違いがあります。

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>

ログイン後にコピー

問題は解決されました。