表单 – 在文本字段中的keydown事件之后检测输入文本字段的“值

发布时间：2020-12-14 21:35:55 所属栏目：资源来源：网络整理

导读：所以我的网站有一个输入框，它有一个onkeydown事件，只是提醒输入框的值。不幸的是，输入的值不包括由于按下键而导致的更改。例如对于此输入框： input onkeydown="alert(this.value)" type="text" value="cow" / 默认值为“牛”。当您按输入中的“s”键时

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

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

例如对于此输入框：

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

默认值为“牛”。当您按输入中的“s”键时，您会收到警报(“牛”)而不是警报(“牛”)。如何在不使用onkeyup的情况下使其提醒(“牛”)？我不想使用onkeyup，因为感觉反应迟钝。

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

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

谢谢

解决方法

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

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

一个最小的例子是：

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

这将设置一个1ms超时，应该在按键和键控处理程序让控件更改其值之后发生。如果您的显示器在60fps上刷新，那么您的显示器之前有16毫秒的摆动空间才能保持2帧。

一个更完整的例子(不依赖于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>

运行上述代码片段时，请尝试以下某些操作：

>将光标放在开始处并键入>在文本框的中间粘贴一些内容>选择一堆文本和类型来替换它

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!