通过 Javascript 事件将文本插入 HTML <input/> 字段答案

【问题标题】：Inserting text to HTML <input/> field through Javascript event通过 Javascript 事件将文本插入 HTML <input/> 字段
【发布时间】：2019-05-13 23:18:04
【问题描述】：

我正在寻找一种在不使用 DOM API 的情况下将文本插入输入字段的方法。但我试图找到的是通过 Javascript 创建一个新的 input 事件并将该事件分派到输入字段。这样与事件相关的文本值将填充到输入中。

我尝试将data 属性的值设置为input 事件。但这没有用。请看下面的代码：

const nameField = document.querySelector('#name');
const event = new Event('input');
event.data = '1234'; 
nameField.dispatchEvent(event);

如果您知道如何操作，请分享您的知识。

【问题讨论】：

I am looking for a method to insert text to input field without using DOM APIs 为什么？这里的目标是什么？为什么不使用document.querySelector('#name').value = "1234";？

标签： javascript html input dom-events

【解决方案1】：

问题是您没有自定义输入事件的事件侦听器。这样一来，您无需实际处理即可调度事件。

试试这个：

const nameField = document.querySelector('#name');
nameField.addEventListener("customInput", function(e) {
  e.target.value = e.data
})
const event = new Event('customInput');
event.data = '1234';
nameField.dispatchEvent(event);

&lt;input type="text" id="name"&gt;

【讨论】：

您仍在通过 Javascript e.target.value = e.data 设置文本值。我在这里想要的是使用本机 input 事件而不使用任何自定义 Javascript 来设置输入字段的值。
那恐怕这是不可能的。只要目标元素的 value 属性发生变化，输入事件就会触发，并且不打算用来改变它。