は、dispatchEventを使用してプログラムでキーを入力に送信します。

Question

ユーザーの操作に基づいて入力要素に文字を送信しようとしています。

私はdispatchEventとKeyboardEventを使用しようとしているが、何でも私は、それは例えば

let keyEvent = new KeyboardEvent(); 
keyEvent.key = 'a'; 
keyEvent.keyCode = 'a'.charCodeAt(0); 
keyEvent.which = event['keyCode']; 
keyEvent.altKey = false; 
keyEvent.ctrlKey = true; 
keyEvent.shiftKey = false; 
keyEvent.metaKey = false; 
keyEvent.bubbles = true; 

ないこれが正しいかどうか確認してください動作しませんが、次のように私はそれを派遣してきました

document.querySelector('input').dispatchEvent(keyEvent); 
    document.activeElement.dispatchEvent(keyEvent); 
    document.dispatchEvent(keyEvent); 

DEMO

ボタンをクリックする前にまず入力をフォーカスすると、何も起こりません。何がここで間違っているかもしれない何かの提案？

Answer 1

でunderdstandカント。

KeyboardEvent文書では、それは非常に明確になります：

注：は手動でイベントを発火、そのイベントに関連付けられたデフォルトのアクション を生成しません。たとえば、キーイベント を手動で起動しても、フォーカスされたテキスト入力にその文字が表示されることはありません。 UIイベントの の場合、 は、 ブラウザと対話するユーザーの操作をスクリプトがシミュレートするのを防ぐため、セキュリティ上の理由から重要です。

したがって、dispatchEventの情報は単純に機能しません。

または、input要素を直接操作することを検討してください。

Answer 2

あなたのコードのベースはeventKeyboardですが、 - ディスパッチキーイベント後、ワースの次は？、リスナーは誰ですか？ - ...私はinput要素にKeyboardEventを派遣するは、あなたが期待する行動を生成しない、セキュリティ上の理由で、実際にはすべての

document.querySelector('button').addEventListener('mousedown', (e) => { 
     e.preventDefault(); 
     e.stopImmediatePropagation(); 
     e.stopPropagation(); 

     console.log('send key'); 

    /*let keyEvent = new KeyboardEvent(); 

    keyEvent.key = 'a'; 
    keyEvent.keyCode = 'a'.charCodeAt(0); 
    keyEvent.which = event['keyCode']; 
    keyEvent.altKey = false; 
    keyEvent.ctrlKey = true; 
    keyEvent.shiftKey = false; 
    keyEvent.metaKey = false; 
    keyEvent.bubbles = true; 
    console.log(keyEvent);  */ 
    var keyEvent = new KeyboardEvent("keydown", { 
     bubbles : true, 
     cancelable : true, 
     char : "A", 
     key : "1", 
     shiftKey : true, 
     keyCode : 81 
    }); 
     document.querySelector('input').dispatchEvent(keyEvent); 
     document.activeElement.dispatchEvent(keyEvent); 
     document.dispatchEvent(keyEvent); 
    console.log(keyEvent); 
});