如何更改输入标记对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元素内部的'enter'之前不会记录'hello world' (即'change'div的'change'事件看起来可能与按钮的事件不同).

我一直在尝试这种萤火虫的里面,我一直在寻找的addEventListener和change文档上MDN,并已阅读了变化事件监听各种标签不同.

有没有人知道修改input变更事件的方法addEventListener来注册实际的文本更改,而不仅仅是当有人点击进入内部时input？

要不然

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

Answer 1

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

在以下情况下触发更改

当元素在其值更改后失去焦点但未提交时(例如,在编辑或的值之后)

在MDN上再次根据这一点:https://developer.mozilla.org/en-US/docs/Web/Events

更改:

自获得焦点以来,元素失去焦点并且其值发生了变化.

这意味着只有焦点丢失,但值也应该改变.如果你不改变什么,change就不会被解雇.

为了观察a中的变化input,您可以使用input事件.

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

当更改或元素的值时,将同步触发DOM输入事件.

您可以在下面看到使用此代码段.在change你要tab出来的input,看而在该值input的价值可以在每个观察输入上input.您也可以使用keyup,但输入是实现它的方法.

片段:

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事件对于此类方案更好.

.