入力ボックスの入力イベントの詳細分析_JavaScriptスキル

1. 基本: この分析の原則は、さまざまなブラウザーで入力コンテンツが変更されたときのイベントのトリガーにおけるさまざまな非互換性です。IE では onpropertychange イベントを使用し、他のブラウザーでは input イベントを使用します。次の状況について各ブラウザを個別にテストします。
– 英字を入力するとき – インプットメソッドを開くとき – 大文字と小文字が異なる場合 – 演算子を入力するとき – Tab キーを押すとき – インプットメソッドを押すときスペースが押されたとき – コントロール キーが押されたとき – コピー＆ペースト時 – テキストが削除されたとき – など
3. テストの開始: (特殊な場合のみマークされ、マークされていないものは通常のトリガーを示し、イベントは 1 つだけです。毎回トリガーされます)
chrome:
入力メソッドがオンになっている場合、入力イベントをキャプチャできます。
入力メソッドがオンになっているときに、スペース バーを押すと 2 つのイベントがトリガーされます。スペースによってトリガーされ、もう 1 つは入力メソッドが入力ボックスを変更したときにトリガーされます。
入力メソッドがオンになったら、スペース ボタンを押してからすぐに Caps Lock を押します。 、すべての入力イベントは不明な理由で 2 回トリガーされます。
入力メソッドがオンになっていない場合、方向キーはイベントをトリガーしませんが、入力メソッドがオンになった後は方向キーでイベントがトリガーされる可能性があります。 🎜> 切り取りと貼り付けの両方でイベントがトリガーされます。入力方法がオンになっている場合、Tab キーを押してもイベントはトリガーされません (例: 数字キー)。 )、文字が入力されるたびにイベントが 2 回トリガーされます。
Firefox:
入力メソッドがオンになっている場合、イベントはキャプチャできませんが、スペースを押すとイベントをトリガーできます。
矢印キーはいつでもイベントをトリガーしません。
入力方法がオンになっている場合、スペース ボタンを押した後、すぐに Caps Lock が押されます。その後、すべての入力イベントが 2 回トリガーされます。理由は不明です。
Firefox ページを更新すると、イベントは入力ボックスに保持されます。
キーを押したままにします。例: 数字キー)、入力された文字ごとにイベントが 2 回トリガーされます。イベント:
opera:
通常の状況では、入力ボックスで Tab キーを押すとイベントがトリガーされます。その後ページが更新されない場合、Tab キーはこのイベントを再度トリガーしません。
入力メソッドをオンにします。オンにした後は、方向キーも Tab キーもイベントをトリガーしません。
入力メソッドがオンになっている場合、スペース ボックスを押すとイベントは 1 回だけトリガーされ、イベントは 2 回トリガーされません。
イベントがトリガーされると、カット時にはトリガーされません。例:
入力メソッドはイベントをトリガーしません。スペース ボタンを押してもイベントは一度だけトリガーされます。
ページを更新すると、イベントがトリガーされます。
3. 一言で言えば、その違いは非常に大きいです。 🎜>入力イベントは Chrome、Firefox、Opera で使用できることに注意してください。ontype ではなく、addEventListener を使用してのみバインドできます。Onpropertychange は on またはattachEvent を使用してバインドできます。

その他のオンライン デモンストレーション手順:
http://www.jb51.net/tools/keyboard_events.html