Question

所以我的网站有一个输入框，它有一个onkeydown事件，只是警告输入框的值。

不幸的是，输入的值不包括由于按下键而导致的更改。

例如，对于此输入框：

<input onkeydown="alert(this.value)" type="text" value="cow" />

默认值为“cow”。当您按下输入中的“s”键时，您会收到警报（“cow”）而不是警报（“奶牛”）。如何在不使用onkeyup 的情况下使其警惕（“奶牛”）？我不想使用onkeyup，因为它感觉不太敏感。

一个部分解决方案是检测按下的键然后将其附加到输入的值，但这并不适用于所有情况，例如，如果您突出显示输入中的文本，然后按一个键。

任何人都有这个问题的完整解决方案吗？

由于

Answer 1

事件处理程序仅在应用更改之前查看内容，因为mousedown和input事件使您有机会在事件到达字段之前阻止该事件。

您可以通过让浏览器在获取其值之前更新字段内容来解决此限制 - 最简单的方法是在检查值之前使用一个小超时。

最小的例子是：

<input id="e"
    onkeydown="window.setTimeout( function(){ alert(e.value) }, 1)"
    type="text" value="cow" />

这设置了在keypress和keydown处理程序让控件更改其值后应该发生的1ms超时。如果您的显示器以60fps的速度刷新，那么在它落后2帧之前你有16ms的摆动空间。

更完整的示例（不依赖于named access on the Window object看起来像：

var e = document.getElementById('e');
var out = document.getElementById('out');

e.addEventListener('input', function(event) {
  window.setTimeout(function() {
    out.value = event.target.value;
  }, 1);
});

<input type="text" id="e" value="cow">
<input type="text" id="out" readonly>

运行上述代码段时，请尝试以下操作之一：

将光标放在开头并键入
将一些内容粘贴到文本框的中间
选择一堆文字并输入以替换它

Answer 2

请注意，在较新的浏览器中，您可以使用新的HTML5＆＃34;输入＆＃34;事件（https://developer.mozilla.org/en-US/docs/DOM/window.oninput）。大多数非IE浏览器已经支持此事件很长时间了（参见链接中的兼容性表）;对于IE它的版本＆gt; / 9只是不幸。

Answer 3

keyup / down事件在不同浏览器中的处理方式不同。简单的解决方案是使用类似mootools的库，这将使它们表现相同，处理传播和冒泡，并在回调中为您提供标准的“this”。

Answer 4

据我所知，你不能用标准输入控件做到这一点，除非你自己动手。

Answer 5

这里有一些解释示例： http://jsbin.com/awopus/4/edit

Answer 6

请尝试使用 oninput 事件。与 onkeydown ， onkeypress 事件不同，此事件会更新控件的value属性。

<input id="txt1" value="cow" oninput="alert(this.value);" />

Answer 7

Jquery是这样做的最佳方式。请参考以下内容：

let fieldText = $('#id');
let fieldVal = fieldText.val();

fieldText.on('keydown', function() {
   fieldVal.val();
});

在文本字段中的keydown事件之后检测输入文本字段的“值”？

7 个答案: