ホームページ >ウェブフロントエンド >jsチュートリアル >中国語入力メソッドでonkeyupイベントが発生しない場合の解決策_基礎知識
中国語入力メソッドでonkeyupイベントが発生しない場合の解決策_基礎知識
- WBOYオリジナル
- 2016-05-16 16:42:161778ブラウズ
過去 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>
問題は解決されました。