javascript 在文本字段中发生按键事件后检测输入文本字段的“值”?

1zmg4dgp  于 2023-01-19  发布在  Java
关注(0)|答案(6)|浏览(119)

我的站点有一个输入框,它有一个onkeydown事件,该事件仅提醒输入框的值。
不幸的是,输入值不包括由于按下键而引起的变化。
例如,对于此输入框:

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

默认值是“cow”,当你在输入中按下s键时,你得到的是alert("cow")而不是alert("cows"),我怎么才能不使用onkeyup**而把它变成alert("cows")**呢?我不想使用onkeyup,因为它感觉响应更慢。
一个部分解决方案是检测按下的键,然后将其附加到输入值,但这并不是在所有情况下都有效,例如突出显示输入中的文本,然后按下一个键。
有人能完整地解决这个问题吗?

xwmevbvl

xwmevbvl1#

    • 注意**:自从我写下这个答案已经十多年了。input事件已经无处不在,应该用它来代替这个黑客攻击。

keydown/keyup对平板电脑和语音输入设备意味着什么?
事件处理程序只能看到应用更改之前的内容,因为mousedowninput事件使您有机会在事件到达字段之前将其阻塞。
您可以通过在获取字段值之前给浏览器一个更新字段内容的机会来解决这个限制-最简单的方法是在检查值之前使用一个小的超时。
一个最小的例子是:

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

这设置了一个1ms的超时时间,在keypress和keydown处理程序允许控件改变它的值之后,如果你的显示器以60fps刷新,那么在它滞后2帧之前,你有16ms的回旋余地。
更完整的示例(不依赖于Window对象上的命名访问)如下所示:
x一个一个一个一个x一个一个二个x
运行上面的代码段时,请尝试执行以下操作:

  • 将光标放在开始处并键入
  • 在文本框中间粘贴一些内容
  • 选择一组文本并键入以替换它
xdnvmnnf

xdnvmnnf2#

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

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

de90aj5v3#

注意在新的浏览器中你可以使用新的HTML5“input”事件(https://developer.mozilla.org/en-US/docs/DOM/window.oninput),大多数非IE浏览器支持这个事件已经很长时间了(见链接中的兼容性表);对于IE它的版本〉/9只是不幸.

pu3pd22g

pu3pd22g4#

keyup/down事件在不同的浏览器中处理方式不同,简单的解决办法是使用mootools这样的库,它会让它们的行为相同,处理传播和冒泡,并在回调中给予你一个标准的“this”。

x4shl7ld

x4shl7ld5#

据我所知,你不能这样做的标准输入控制,除非你自己滚动。

u59ebvdq

u59ebvdq6#

Jquery是实现这一点的最佳方法,请参考以下内容:

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

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

相关问题