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

Question

我的网站有一个输入框，其中有一个 onkeydown 事件，仅提醒输入框的值。

不幸的是，输入的值不包括由于按下按键而发生的变化。

例如对于这个输入框：

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

默认值为“cow”。当您在输入中按下 s 键时，您会收到 alert("cow") 而不是 alert("cows")。如何在不使用 onkeyup 的情况下实现 alert("cows") ？我不想使用 onkeyup 因为它感觉响应速度较慢。

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

有人有完整的解决方案来解决这个问题吗？

Answer 1

注意：自从我写这个答案以来已经过去十多年了^(!!)。 input 事件已经变得无处不在，应该使用它来代替这个 hack。

^{keydown/keyup 对于平板电脑和语音输入设备意味着什么？}

---

事件处理程序只能看到应用更改之前的内容，因为 mousedown 和 input< /code> events 让您有机会在事件到达现场之前阻止该事件。

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

一个最小的示例是：

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

这设置了 1 毫秒的超时，该超时应该在按键和按键处理程序让控件更改其值之后发生。如果您的显示器以 60 fps 刷新，那么在滞后 2 帧之前您有 16 毫秒的回旋空间。

---

更完整的示例（不依赖于 对 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事件此事件更新控件的值属性。

<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。

Answer 4

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

Answer 5

据我所知，除非您自己推出，否则您无法使用标准输入控件来做到这一点。

Answer 6

Jquery 是执行此操作的最佳方法。请参考以下内容：

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

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