javascript - 如何更改输入标签对 addEventListener ('change' 的响应)？

Question

我使用 html 输入标签从用户那里获取文本。当用户在输入元素中键入一个字符时，我想 console.log他们刚刚输入的文本；看起来我是console.log对每个字母。我通过为 'change' 添加事件监听器来尝试这样做在 input 上标签。

为了证明我的意思，我在下面的代码中简化了我的问题......

<input type="text" id='userInput' placeholder='enter characters here'/>

在 JS 脚本中:

text = document.getElementById('userInput'); text.addEventListener('change', function() { console.log('hello world'); });

我选择了 'change'事件，因为我认为在 input 中输入文本标记元素等同于更改该元素，这样每次用户键入 input元素，它记录“ Hello World ”。

然而，'change' input 的事件元素不是我所期望的。实际发生的是，直到您在 input 中点击“输入”，才会记录“hello world”。元素(即 div 的 'change' 事件可能看起来不同于按钮的 'change' 事件)。

我一直在 Firebug 内部进行试验，我正在查看 addEventListener和 change关于 MDN 的文档，并已阅读到更改事件以不同方式监听各种标签。

有谁知道修改 input 的方法吗？ addEventListener 的更改事件注册实际的文本更改，而不仅仅是当有人在内部输入 input 时?

否则

如果我不能指定 'change' input 的事件, 有没有人知道另一种方式 console.log输入到 input 中的每个字符?

Answer 1

根据您在 MDN 上链接到的引用:https://developer.mozilla.org/en-US/docs/Web/Events/change

更改在以下情况下触发:

When the element loses focus after its value was changed, but not commited (e.g. after editing the value of or

再次根据 MDN 上的内容:https://developer.mozilla.org/en-US/docs/Web/Events

改变:

An element loses focus and its value changed since gaining focus.

这意味着只是失去了焦点，但值(value)也应该发生了变化。如果您不更改任何内容，则不会触发 change。

为了观察 input 的变化，您可以使用 input 事件。

再次来自 MDN:https://developer.mozilla.org/en-US/docs/Web/Events/input

The DOM input event is fired synchronously when the value of an or element is changed.

您可以使用下面的代码片段看到这一点。在 change 上，您必须从 input 中按 tab 键才能看到值，而在 input 上可以观察到值input 上的每个 input。您也可以使用 keyup，但 input 是执行此操作的方法。

片段:

text = document.getElementById('userInput');
resultChange = document.getElementById('result-change');
resultInput = document.getElementById('result-input');
resultKeyup = document.getElementById('result-keyup');

text.addEventListener('change', function() {
    resultChange.innerText = text.value;
});

text.addEventListener('input', function() {
    resultInput.innerText = text.value;
});

text.addEventListener('keyup', function() {
    resultKeyup.innerText = text.value;
});

<input type="text" id='userInput' placeholder='enter characters here'/><hr />
<h3>On change</h3><p id="result-change"></p><hr />
<h3>On input</h3><p id="result-input"></p><hr />
<h3>On keyup</h3><p id="result-keyup"></p>

注意:处理 input 事件更适合此类场景。

.