如何通过 keydown 事件在输入中添加文本

Question

我在 Angular7 项目中工作，我想编写测试来模拟用户输入的数据。为此，我想触发一些事件来填充要测试的输入。
示例：我想在输入中输入“12.50”，所以我可能应该发送 5 个事件："1"、"2"、"."、"5"、"0"

我知道我可以更新元素值，但我真的想检查 keydown 的行为（某些字符是不允许的，例如字母）。
我检查了很多示例和问题，但其中 none 对我有用。 JavaScript有没有可能做这种思考？

Answer 1

您可以使用 KeyboardEvent 以编程方式创建一个 keydown 事件，并从您的 <input> 元素发送它。

虽然这会触发在您的 <input> 元素上设置的任何 keydown 处理程序，但它不会具有更新的效果<input> 的值与真正的 keydown 一样。

const txt = document.querySelector('#txt');

txt.addEventListener('keydown', ev => console.log(`key=${ev.key}`));

const btn = document.querySelector('#btn');
btn.addEventListener('click', () => {
  txt.dispatchEvent(new KeyboardEvent('keydown', {key: '1'}));
  txt.dispatchEvent(new KeyboardEvent('keydown', {key: '2'}));
  txt.dispatchEvent(new KeyboardEvent('keydown', {key: '.'}));
  txt.dispatchEvent(new KeyboardEvent('keydown', {key: '5'}));
  txt.dispatchEvent(new KeyboardEvent('keydown', {key: '0'}));
});

<input id="txt"/>
<button id="btn">Dispatch "12.50"</button>

如何通过 keydown 事件在输入中添加文本

How can I add text in a input through a keydown event

javascript

events

keydown