序文
最近、製品は多くの入力ボックスを作成する必要があります。製品が望むインタラクティブな効果は次のとおりです。ユーザーは中国語と英語を入力でき、ユーザーの入力が入力されると、入力された文字の数をリアルタイムで表示できます。数量制限が制限を超えると、入力ボックスの境界線が赤くなり、ユーザーは情報を求められます。
この相互作用は問題のないように聞こえ、技術的な実装に困難はないようです。しかし、気づいたとき、私は中国の入力方法に遭遇し、落とし穴があることを発見しました。
なんてトリック、以下を見てみましょう~~
入力ボックスのコンテンツ長さのリアルタイム監視、遭遇したピットは、 oninputイベントを監視するために使用されます。
このoninputイベントを使用することには2つの利点があります。
ユーザーが右クリックして入力ボックスのコンテンツを変更すると、聞くことができます。
このイベントは、入力ボックスのコンテンツが変更された場合にのみトリガーされます。たとえば、このイベントは、ユーザーが矢印キー、 control / shiftなどのコントロール文字キーを押すとトリガーされません。
効果は、英語のキャラクターや数字を入力すると、正常输入中文場合でも完璧です。ただし、非正常输入中文バグが発生します。異常な入力はどのようなものですか？次の例の写真を参照してください。
見たことがありますか？この中国の入力方法では、ユーザーは入力したい中国人に入っていませんが、いくつかのピニインに入りましたが、 inputイベントがトリガーされ、聴く入力ボックスvalue実際にはd'd'd文字だけでなく、分離ポイントもあります。入力ボックスのコンテンツの長さが5以下に制限されている場合、スクリーンショットの場合、ユーザーは字符长度超过限制！ 。もちろん、このようなインタラクティブな効果は、製品が望むものではありません。
onkeydown / onkeypress / onkeyupイベントを使用してリッスンします
これらのイベントの欠点は、右クリックからコピーされた入力コンテンツを聞くことができないことですが、 inputイベントと同じ問題が発生しますか？
私はいくつかの実験を行いましたが、 keydownとkeyup inputと同じ問題に遭遇することを発見しましたが、 keypressこの問題を抱えていません。なぜなら、中国の入力状態では、 keypressトリガーされず、ピンアインに入るプロセス中にトリガーしないだけでなく、「正しいこと」などの正しいこと」などの中国語を選択したい中国語を選択した後にトリガーしないからです。次に、「右、右、右」が入力されると、文字制限を超えていますが、字符长度超过限制！のヒント。
妥協ソリューション
コンテンツの長さをリアルタイムで監視し、中国の入力方法にバグがないことを確認するために、私は長い間苦労してきましたが、最終的にはできないことがわかりました！ （ヒーローが見つかった場合は、教えてください~~）。
そのため、最終的には、ユーザーエクスペリエンスが犠牲になり、妥協が見つかりました。入力ボックスはフォーカス（つまり、 blur ）を失いました。もちろん、入力ボックスのコンテンツが制限を超えていることがわかった場合は、ユーザーの変更を容易にするためにカーソルを入力ボックスに保持する必要があります。
残念ながら、用户输入回车键时才进行内容长度的检测、彼が以前に植えられた落とし穴がチェックされます。
Enterキーが入力ボックスに入力されていることを検出する方法
実際、これは非常に一般的な相互作用です。たとえば、名前を変更すると、ユーザーがキャリッジに入った後に直接入力して保存するようにサポートし、ログインすると、ユーザーがキャリッジに入った後に直接入力してログインするようにサポートします。しかし、注意すべき落とし穴は次のとおりです。 **中文输入法下按回车键来输入英文字符** 。
中国の入力方法に基づいて英語の文字を入力するためにEnterキーを押すプロセスの例：
たとえば、アカウントを入力してログインしたい場合、アカウントはすべて英語です。私は現在中国の入力方法にいますが、入力方法を切り替えるのが面倒すぎているので、アカウント（すべての英語のキャラクター）を直接入力しました。この時点で、Sogou入力方法は私に大きな中国語の文字列を促し、その後Enterを押して、入力ボックスが私が望んでいた英語のキャラクターを入力しました。
この場合、ユーザーはEnterキーを入力しましたが、ユーザーはEnterキーを押して、中国の入力方法に基づいて英語の文字を入力しました。このEnterキーは、監視するEnterキーではありません。では、この場合のENTERキーを除外するにはどうすればよいですか？
一般的に言えば、Enterキーを聞くとき、 keydownイベントまたはkeyupイベントを使用します。実装コードは次のとおりです。どちらの方法でも、聞きたくないEnterキーを除外できますか？
//メソッド1：キーダウンイベント入力を使用してください。OnkeyDown= function（e）{if（e.keycode == 13）{//ユーザーはEnterキー// DOS関連操作}} //方法2：キーアップイベント入力を使用します。実験の後、 keydownを使用すると正常にフィルタリングできますが、 keyupを使用できないことがわかりました。
では、なぜ見てみましょう。
これは、 keydownイベントで：中国の入力メソッド状態に入力されたキーEnterキーが、検出されたkeyCode 13ではなく229であるためです。単に返品を入力するとき、 keyCodeは13です。
keyupイベントでは、中国の入力メソッド状態にENTERキーを入力することで検出されたkeyCode 13です。 Enterを入力するだけで、 keyCodeも13です。
次の図は、コンソールに印刷した結果です。（コードの例についてはこちらを参照）
結論
入力ボックスに関係するいくつかのイベント：keydown/keyup/keypress/input/変更
こちらをご覧ください：//www.vevb.com/article/21237.htm