提案開発の概要とキーボード イベントの概要 (中国語入力メソッドのステータスについて)_JavaScript スキル

重要的键盘事件：
事件顺序：keydown -> keypress ->keyup
对于输入法开启时：
keypress：
这三个事件中最最特别的事件的说,如果巧妙运用可以事半功倍：
1. 首先对于大部分功能键是没有keypress事件的
Caps lock ，shift，alt，ctrl，num lock、、、庆幸的是enter拥有此事件
2. 对于字母，数字，press返回的keyCode是不可靠的
在IE和webkit 下 返回的是ASCII code
firfox下永远返回0
但是 对于keyUP keyDOWN事件 键值是完全统一的
3. KeyPress 只能捕获单个字符
KeyDown 和KeyUp可以捕获组合键。故可能涉及组合键的功能需要绑定在down up事件上
对于中文输入法开启时个浏览器对事件的不同相应以及解决方法：
在中文输入法开启状态下：
Firefox：当点击字母键时，会触发这样的事情：

     为什么叫做虚拟失焦呢： 这种状态下并未真正触发失焦状态，但是却屏蔽了所有输入框绑定的键盘事件     

        IE，webkit ： 但用户点击字母键，又会发生这样的事情

          

 

启发： 由于在这种状态下 是可以捕捉keyup,keydown从而捕捉KEYCODE的，前端可以通过模拟KEYCODE入输入框实现输入法与输入框的同步状态，并触发在输入状态时便同步suggestion。

では、インプットメソッドの実行中にユーザーが Enter キーを押したときに、Enter キーの元のイベントがトリガーされるのを回避するにはどうすればよいでしょうか?
上の 2 つの図を見ると、非常に単純です。-----keyPress イベントは、検索のトリガーなどの元のイベントにバインドされています。
インプット メソッドの実行中に keyup はバインドされます。 、 Enter を押す、スペースやその他のトリガーする必要のあるイベントは、検索ボックスからの終了を検出するために使用することもできます

では、ユーザーが入力した後にポイントを検出するにはどうすればよいでしょうか?
前の質問で決定した keyUP イベントと連携することで、入力メソッドが表示されたときにイベントをブロックする必要がある場合は、それを keypress イベントにバインドするだけです。
提案の概要:
最初から始めましょう:
提案の開発において、最大の障害はユーザーの動作をチェックすることであり、これらのユーザーの動作は主に小さな入力ボックスに集中しています。キーボード イベントをうまく使用すると、コードの量を減らすことができます。パフォーマンスを向上させ、ユーザー エクスペリエンスを最大限に最適化します。

主なユーザー動作は次のように要約されます。
1. 入力内容の変更 (追加、削除、貼り付け) - 最も重要なのは継続的な入力です
2ファンクション キーをタップします -- 主なキーの値は次のとおりです:
keyCode: 13 -- Enter キー
keyCode: 27 -- Esc キー
keyCode: 38 -- 上方向キー --> Webkit カーネル自動的にヘッダーを見つけます。防止することを忘れないでください~
keyCode: 40 --下矢印キー
開発中にいくつかの小さな問題や回り道にも遭遇しました:
まず、イデオロギーの観点からの要約:
1. 間違った考え:
1: ユーザーがキーボードをタップするたびにリクエストを送信する
これは間違いなく最も簡単な方法ですが、多くの処理が必要です。 AJAX とそのほとんどは、表示する機会がない場合、優れたフロントエンド コードでは、フロントエンドとバックエンドの対話における無駄を十分に考慮して、無駄を最小限に抑える必要があります。
2: 入力ボックスの内容を時々検出します。
コードを時々実行します。これはパフォーマンスの無駄です。最も重要なことは、このメカニズムではユーザー入力を適切に制御できないことです。 . イベントと js の検出のシーケンス。
ユーザーの入力直後に検出が完了すると、エラーが発生します。現在の入力ボックスのステータスを検出することでこれを補うことはできますが、エクスペリエンスは非常に悪く、多くの ajax リクエストが無駄になります。
2．最適化されたアイデア:
キーノックイベント後にバインドする
最初の方法が開発された後、セルフテスト中に、ユーザーの行動のタイムスタンプを正確に監視できないために多くの問題が発生することがわかりました。バグを 1 つずつ修正していくうちに、より良いアイデアが生まれました。
キータップイベントを検出してリクエストを送信するかどうかを決定し、連続タップイベントをブロックします。
具体的なアイデア:
ユーザーが入力ボックスに注目すると、キーダウン イベントの監視を開始し、キーダウン イベントが発生して入力ボックスが変化する可能性があるとき、その時点での入力ボックスの状態を記録します。 100 ミリ秒後の現在の入力ボックスの状態 以前のものと一致しない場合は、AJAX リクエストをバックエンドに送信できます
このように、ユーザーの入力と入力頻度に応じて、AJAX リクエストの数はが決定され、ajax リクエストがしきい値制限を超えて削減されます。ユーザーが入力すればするほど、より多くの js が検出され、より多くの ajax が検出されます。ユーザーが動かなければ、js の検出は行われず、ユーザーが入力するのが遅いと、js の検出は少なくなり、無駄が大幅に削減されます。 。