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

前端之家收集整理的这篇文章主要介绍了表单 – 在文本字段中的keydown事件之后检测输入文本字段的“值”?前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
所以我的网站有一个输入框,它有一个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>

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

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

原文链接:https://www.f2er.com/html/232921.html

猜你在找的HTML相关文章