jQuery 键盘事件

IT技术 javascript jquery
2021-02-25 15:04:27

使用 jQuery,我想捕获一个键盘事件:

  • 用户将手指从按键上抬起之前
  • 从键盘事件中字符已经登记在输入框中。

为了澄清,请查看此示例keypress火灾,该input值尚未更新。

[编辑]

显然我不清楚我需要什么。

该函数必须在用户将手指从键上抬起之前调用,但键的字符放入输入框中之后调用所以以下不起作用:

  • keydown:keypress事件时,文本框中的值没有更新
  • keypress:keypress事件时,文本框中的值没有更新
  • keyup:当用户抬起手指时调用它,这为时已晚。
4个回答

您可以使用该input事件,该事件适用于所有主要浏览器的最新版本:

var input = document.getElementById("your_input_id");
input.oninput = function() {
    alert(input.value);
};

不幸的是,它在 IE <= 8 中不起作用。但是,在这些浏览器中,您可以改用属性propertychange上的事件value

input.onpropertychange = function() {
    if (window.event.propertyName == "value") {
        alert(input.value);
    }
};

所以常规 JavaScript回答者 @Andy E在他的博客中详细介绍了这一点:https : //web.archive.org/web/20140626060232/http://whattheheadsaid.com/2011/10/update-html5-oninput-event- jquery插件

如果输入的更改以编程方式完成怎么办?有没有办法捕捉这种变化?(例如:输入是只读的,只能通过一些 javascript 代码更改 - 如何捕获此更改?)
2021-04-22 15:04:27
太神奇了,我以前从未见过这个事件,但它完美无缺!
2021-04-23 15:04:27
@franzlorenzon:是的,安迪的博客似乎坏了。我给他发消息
2021-04-23 15:04:27
请更新或删除该博客链接,将其重定向到垃圾邮件发送者网站。
2021-04-28 15:04:27
@Maidul:真可惜。该网站上有一些有用的东西。我将删除或替换链接。
2021-05-15 15:04:27

使用keyup 事件jsFiddle 上的一个例子

$("textarea").keyup(function(e){
   alert($(this).val());
});

它发生你拿起钥匙之后。我不知道您想要实现什么,但是您可以在解除键(打开keydownkeypress之前存储状态,并在需要时稍后恢复。您还可以使用停止keyup事件中的输出e.preventDefault(),因此即使在键启动后,它也不会注册该区域中的值。

您可以监听keydown事件并将值存储在变量中。该变量将具有新输入之前的值,并且新输入将包含在keyup事件中

更新:

好的,我误解了您的要求,但没有符合您需求的活动。我能想到的模拟这种行为的唯一方法如下:

  • 听着 keydown/keypress
  • event对象中获取值(获取event.which,然后将其转换为实际值)
  • 使用我在原始建议中提到的变量并将新输入连接到它

这是一个小提琴:http : //jsfiddle.net/HpXuU/13/

这显然不是一个完美的解决方案,因为它需要一些(有人可能认为不必要的)工作才能正确完成。我建议重新考虑您的需求,但如果这种行为绝对是您所需要的,我认为这是朝着正确方向迈出的一步。

所以你需要让代码通灵,并且知道用户将在下一毫秒而不是之后举起手指?
2021-04-27 15:04:27
@SW 嗯,嗯……这不正是我的建议吗?这是一个小提琴:jsfiddle.net/HpXuU/10
2021-04-27 15:04:27
keydown 将在键被解除之前为您提供值
2021-04-28 15:04:27
如果用户没有在文本框的末尾输入,则小提琴不起作用。
2021-05-08 15:04:27
解除键之前我需要新的输入值
2021-05-16 15:04:27

您可以使用setTimeout

$('input').keypress(function() {
    var that = this;
    setTimeout(function() {
        // read that.value
    }, 0);
});

现场演示: http : //jsfiddle.net/HpXuU/8/

@SW 该setTimeout机制确实有一个最小延迟,即 cca。10 毫秒(取决于浏览器)。但是,您可以定义一个setZeroTimeout函数(代码在此处),该函数将在按键事件处理程序返回后立即执行。
2021-05-08 15:04:27
除非我弄错了,否则不能保证在指定的时间正确调用超时。
2021-05-11 15:04:27