检测“值”输入文本字段在文本字段中的keydown事件后？ [英] Detecting "value" of input text field after a keydown event in the text field?

问题描述

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

不幸的是，输入的值不包括由于按下了键而引起的更改。

例如这个输入框：

 < input onkeydown =alert（this.value）type =textvalue =cow/> 
  

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

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

任何人都可以完全解决这个问题？

谢谢

解决方案

因为 mousedown 和输入事件让您有机会在事件到达该字段之前阻止该事件。

你可以通过给浏览器一个更新字段内容的机会来解决这个限制 - 最简单的方法是在检查之前使用一个小超时

一个简单的例子是：

 <输入ID =e
 onkeydown =window.setTimeout（function（）{alert（e.value）}，1）
 type =textvalue =cow/> 
  

这会在keypress和keydown处理程序让控件更改其值后发生1ms超时。如果您的显示器以60fps刷新，那么在延迟2帧之前，您已经有了16ms的摆动空间。

---

更多完整的例子（它不依赖于 Window对象上的named访问权限如下所示：

data-console =truedata-babel =false>

< input type =textid =evalue =cow>< input type =textid =outreadonly>

当你运行上面的代码片段，尝试下面的代码：

• 将光标置于开始处并输入


• 在文本框中间粘贴一些内容


• 选择一堆文本和类型来替换它

So my site has an input box, which has a onkeydown event that merely alerts the value of the input box.

Unfortunately the value of the input does not include the changes due to the key being pressed.

For example for this input box:

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

The default value is "cow". When you press the key "s" in the input, you get an alert("cow") instead of an alert("cows"). How can I make it alert("cows") without using onkeyup? I don't want to use onkeyup because it feels less responsive.

One partial solution is to detect the key pressed and then append it to the input's value, but this doesn't work in all cases such as if you have the text in the input highlighted and then you press a key.

Anyone have a complete solution to this problem?

Thanks

解决方案

The event handler only sees the content before the change is applied, because the mousedown and input events give you a chance to block the event before it gets to the field.

You can work around this limitation by giving the browser a chance to update the field's contents before grabbing its value - the simplest way is to use a small timeout before checking the value.

A minimal example is:

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

This sets a 1ms timeout that should happen after the keypress and keydown handlers have let the control change its value. If your monitor is refreshing at 60fps then you've got 16ms of wiggle room before it lags 2 frames.

---

A more complete example (which doesn't rely on named access on the Window object would look like:

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>

When you run the above snippet, try some of the following:

• Put the cursor at the start and type
• Paste some content in the middle of the text box
• Select a bunch of text and type to replace it

这篇关于检测“值”输入文本字段在文本字段中的keydown事件后？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！