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

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" />

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

一个更完整的示例(不依赖于Window对象上的命名访问权限,如下所示:

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

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

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

Answer 3

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