編程式發送鍵使用dispatchEvent

Question

我試圖根據用戶操作發送字符到輸入元素。

我試圖使用KeyboardEvent與dispatchEvent但無論我做什麼，這是行不通的

例如

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到input元素確實不產生你所期望的作用。

的KeyboardEvent文件非常明確地：

注：手動觸發一個事件不會生成與該事件相關的默認操作 。例如，手動觸發鍵盤事件 不會導致該字母出現在焦點文本輸入中。在UI事件的 的情況下，這對於安全原因很重要，因爲它 阻止腳本模擬與 瀏覽器本身交互的用戶操作。

因此，dispatchEvent的東西根本無法工作。

或者，考慮直接操作input元素。

Answer 2

在你的代碼的基礎上是eventKeyboard，但是： - 在發送keyevent之後，wath的下一個？，誰是監聽器？ - ...我不能在所有

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); 
});