Chrome でのキーダウン シミュレーション: 不正なキー入力のトラブルシューティング

Chrome を使用して構築された Web アプリケーションでは、textarea 要素でのキーダウン イベントをシミュレートすると問題が発生する可能性があります。特定の keyCode を指定しようとしても、テキストエリアは、目的のキーではなく Enter キーなど、間違ったキー値を受け取ることがあります。

この問題を解決するには、両方の ' をオーバーライドするカスタム コードを使用できます。 「KeyboardEvent」オブジェクトの「keyCode」プロパティと「what」プロパティ。 「keyCode」は、「this」を優先するために非推奨になったレガシー プロパティです。 Chrome は次のプロパティで異なる動作をします:

• Firefox または Safari では 'keyCode' のみオーバーライドする必要があります。
• Chrome では、'keyCode' と 'that' の両方をオーバーライドする必要があります。

次のコードは、Chrome で正しい 'what' 値を使用してキーダウン イベントをシミュレートする方法の例を示しています。

var keyEvent = document.createEvent('KeyboardEvent');

// Override 'keyCode' and 'which' properties
Object.defineProperty(keyEvent, 'keyCode', { get: function() { return this.keyCodeVal; } });
Object.defineProperty(keyEvent, 'which', { get: function() { return this.keyCodeVal; } });

keyEvent.initKeyboardEvent('keydown', true, false, null, 0, false, 0, false, 77, 0);
keyEvent.keyCodeVal = 77;
inputNode.dispatchEvent(keyEvent);

このコードは、'keyCode' プロパティと 'what' プロパティをオーバーライドし、Chrome がイベントを正しく解釈し、'm' キーに必要なキー値 (77) をトリガーすることを保証します。 &&&]