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元素时，它记录'你好世界'。

但是，'change'元素的input事件不符合我的预期。实际发生的事情是，在input元素内部点击“输入”之前不会记录“你好世界”（即'change'事件的div可能看起来与'change'事件不同按钮）。

我一直在试验Firebug中的内容，我正在查看MDN上的addEventListener和change文档，并且已经读过更改事件以不同的方式侦听各种标记。

是否有人知道如何修改input的{{1}}更改事件以注册实际的文字更改，而不仅仅是当有人点击进入addEventListener时？

或者

如果我无法为input指定'change'事件，是否有人知道input每个字符在console.log中输入的另一种方式？< /强>

Answer 1

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

在以下情况下触发更改：

当元素值改变后失去焦点，但不是提交（例如在编辑或
的值之后）

根据MDN上再次提到：https://developer.mozilla.org/en-US/docs/Web/Events

变化：

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

这意味着只有焦点丢失，但值也应该改变。如果您不更改任何内容，则change将不会被解雇。

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

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

当一个值的值同步触发DOM输入事件或元素已更改。

您可以在下面看到使用此代码段。在change上，您必须tab中的input才能看到该值，而在input上，input上的每个输入上都会显示该值{1}}。您也可以使用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事件更适合此类情况。

Answer 2

您应该尝试听取输入信息。事件而不是改变＆＃39;。

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

＆＃39; KEYUP＆＃39;也非常好，但如果你按住一个按钮，console.logging只有在你发布时才会发生。

Answer 3

尝试使用KeyUp，然后查看http://www.w3schools.com/jsref/event_onkeyup.asp

中的值

您可以在检查文本之前指定最小长度。可能不是你想要的，但可能是一个开始

或者您可以使用onchange http://www.w3schools.com/jsref/event_onchange.asp

Answer 4

更改事件 - 仅在输入失去焦点时触发，并且字符串值与以前不同。
按键 - 您可以使用按键事件：

在HTML中：

＆lt; element onkeyup =＆＃34; myScript＆＃34;＆gt;

在JavaScript中 object.onkeyup =函数（）{myScript的};

在JavaScript中，使用addEventListener（）方法： object.addEventListener（＆＃34; keyup＆＃34;，myScript）;

实例：http://www.w3schools.com/jsref/tryit.asp?filename=tryjsref_onkeydown_onkeyup

如何更改输入标记对addEventListener（'change'）的响应？

4 个答案: