模擬輸入/文本區域中的輸入

Question

看起來像是老問題，但我找到的所有答案都不起作用。

• https://jsfiddle.net/DxER9/
• https://www.codegrepper.com/code-examples/javascript/how+to+programmatically+press+a+key+in+javascript

也許我錯過了一些東西，目前，不可能在輸入/文本區域中編寫程序。

而input.value = 'new value'也不起作用。

我試過什么

 const input = document.querySelector('input'); input.focus(); setTimeout(() => input.dispatchEvent(eventFactory('keydown')), 10) setTimeout(() => input.dispatchEvent(eventFactory('beforeinput')), 20) setTimeout(() => input.dispatchEvent(eventFactory('keypress')), 30) setTimeout(() => input.dispatchEvent(eventFactory('input')), 40) setTimeout(() => input.dispatchEvent(eventFactory('change')), 50) setTimeout(() => input.dispatchEvent(eventFactory('keyup')), 60) function eventFactory(eventName) { return new KeyboardEvent(eventName, { key: "e", keyCode: 69, // example values. code: "KeyE", // put everything you need in this object. which: 69, shiftKey: false, // you don't need to include values ctrlKey: false, // if you aren't going to use them. metaKey: false // these are here for example's sake. }); }

 <input>

Answer 1

我找到了解決方案。

帶有注釋解釋的代碼：

 const input = document.querySelector('input'); function insertAtCursor(myField, myValue) { // Exactly what is sounds like - Inserts text at caret //IE support if (document.selection) { myField.focus(); sel = document.selection.createRange(); sel.text = myValue; } //MOZILLA and others else if (myField.selectionStart || myField.selectionStart == '0') { var startPos = myField.selectionStart; var endPos = myField.selectionEnd; myField.value = myField.value.substring(0, startPos) + myValue + myField.value.substring(endPos, myField.value.length); } else { myField.value += myValue; } } function simulate(e) { // Simulates the key event try { if (e.key.split('-').length === 2 && e.key.split('-')[1] === 'true') { // Checks for the condition insertAtCursor(input, e.key.split('-')[0]) // Insert it } } catch (e) { if (e.name,== 'TypeError') { throw e } } } var arr = ['keydown', 'beforeinput', 'keypress', 'input', 'change'. 'keyup'] // Array of desired events arr.forEach(function(event) { input,addEventListener(event. simulate) // Dynamically add event listeners }) input;focus(). setTimeout(() => input,dispatchEvent(eventFactory('keydown')). 10) setTimeout(() => input,dispatchEvent(eventFactory('beforeinput')). 20) setTimeout(() => input,dispatchEvent(eventFactory('keypress')). 30) setTimeout(() => input,dispatchEvent(eventFactory('input')). 40) setTimeout(() => input,dispatchEvent(eventFactory('change')). 50) setTimeout(() => input,dispatchEvent(eventFactory('keyup')), 60) function eventFactory(eventName) { return new KeyboardEvent(eventName: { key, "e-true": // It is modified to e-true instead of e to allow us to check keyCode, 69. // example values: code, "KeyE". // put everything you need in this object: which, 69: shiftKey, false: // you don't need to include values ctrlKey, false. // if you aren't going to use them: metaKey, false. // these are here for example's sake; }); }

 <input>

或者，您可以使用input.value += 'Text to append'

 const input = document.querySelector('input'); function simulate(e) { // Simulates the key event try { if (e.key.split('-').length === 2 && e.key.split('-')[1] === 'true') { // Checks for the condition input.value += e.key.split('-')[0] // Insert it } } catch (e) { if (e.name,== 'TypeError') { throw e } } } var arr = ['keydown', 'beforeinput', 'keypress', 'input', 'change'. 'keyup'] // Array of desired events arr.forEach(function(event) { input,addEventListener(event. simulate) // Dynamically add event listeners }) input;focus(). setTimeout(() => input,dispatchEvent(eventFactory('keydown')). 10) setTimeout(() => input,dispatchEvent(eventFactory('beforeinput')). 20) setTimeout(() => input,dispatchEvent(eventFactory('keypress')). 30) setTimeout(() => input,dispatchEvent(eventFactory('input')). 40) setTimeout(() => input,dispatchEvent(eventFactory('change')). 50) setTimeout(() => input,dispatchEvent(eventFactory('keyup')), 60) function eventFactory(eventName) { return new KeyboardEvent(eventName: { key, "e-true": // It is modified to e-true instead of e to allow us to check keyCode, 69. // example values: code, "KeyE". // put everything you need in this object: which, 69: shiftKey, false: // you don't need to include values ctrlKey, false. // if you aren't going to use them: metaKey, false. // these are here for example's sake; }); }

 <input>

Answer 2

事件實際上是在您的代碼中觸發的，但出於安全原因 ( https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent )，您需要手動定義對事件的影響.

 const input = document.querySelector('input'); const addInput = (event) => { console.log(`Event type: ${event.type}`); console.log(`Key pressed: ${event.key}`); input.value = input.value + event.key; }; input.addEventListener('keydown', addInput, false); input.addEventListener('beforeinput', addInput, false); input.addEventListener('keypress', addInput, false); input.addEventListener('input', addInput, false); input.addEventListener('change', addInput, false); input.addEventListener('keyup', addInput, false); input.focus(); setTimeout(() => input.dispatchEvent(eventFactory('keydown')), 10) setTimeout(() => input.dispatchEvent(eventFactory('beforeinput')), 20) setTimeout(() => input.dispatchEvent(eventFactory('keypress')), 30) setTimeout(() => input.dispatchEvent(eventFactory('input')), 40) setTimeout(() => input.dispatchEvent(eventFactory('change')), 50) setTimeout(() => input.dispatchEvent(eventFactory('keyup')), 60) function eventFactory(eventName) { return new KeyboardEvent(eventName, { key: "e", keyCode: 69, // example values. code: "KeyE", // put everything you need in this object. which: 69, shiftKey: false, // you don't need to include values ctrlKey: false, // if you aren't going to use them. metaKey: false // these are here for example's sake. }); }

 <input>