查明按键是否更改了值

Finding out if keypress changed the value

本文关键字：是否      更新时间：2023-09-26

是否可以只绑定一个keyup、keypress或keydown来发现字段值已更改？

我的意思是，有些按键不会改变值（比如按左箭头），有些按键会改变值（就像按任何字母按钮或退格键）。

那么，有可能知道按键导致的值更改只有一个绑定吗？

PS：是的，我意识到我可以把值保存在某个地方，并在事件处理程序的一开始就进行比较，但有没有一个没有临时变量的解决方案？

我不这么认为。我的意思是，你可以映射你认为会静音的键代码，但该映射可能不是100%可靠的，因为输入值可能会根据操作系统和浏览器的设置而改变或失去焦点。

不通过变量检测变化是否有特殊原因？这似乎是最可靠的事情，因为这也正是你需要检测的：

var input = $('input'),
    val = input.val();
input.keyup(function(e) {
    ​​​​​​​if (val != (val = $(this).val())) {
        console.log('change');
    }
});​

如果您不想使用杂散变量，那么将其保存在data属性中如何？

$('input').keyup(function(e) {
    ​​​​​​​if ($(this).val() != $(this).data('value')) {
        console.log('change');
    }
    $(this).data('value', $(this).val());
});​

根据您的评论进行更新

如果您不关心密钥，也可以使用input事件（在现代浏览器中）来检测更改：

$('input').bind('input', function() { 
   console.log('changed');
});

最后一个选项是使用间隔并不断检查输入字段（这可能是最可靠的选项）。

根据MDN的KeyboardEvent部分的信息，它看起来像：

  • 每次处理密钥时，您感兴趣的所有密钥都会可靠地生成keypress事件
  • 您可以判断正在按下哪个键（keyCode/key），以及它是否有可打印的表示形式（如果有，则会更改值；但没有可打印表示形式的键也可能更改值）

转到MDN以外的其他来源也会产生这个不错的资源，其中包含关于如何在浏览器中填充keyCode属性的信息。

上面的一个更好的替代方案是DOM级别3 textInput事件，但它也有严重的缺点：

  1. 它目前尚未在主要浏览器中实现
  2. 据我所见，当文本从输入元素中删除时，它不适用

我敢肯定，如果不将原始值存储在某个地方，就无法正确地执行操作。

如果您只想检测键盘交互真正完成的更改，请尝试此操作。

$('#foo').keydown(function (e) {
    this.data = this.value;
});
$('#foo').keyup(function (e) {
    if(this.data != this.value) {
        console.log('changed from "' + this.data + '" to "' + this.value + '"');
    }
});

请注意，当用户按住一个键（比如：箭头键），然后用鼠标修改字段内容，然后释放键时，仍然存在角情况。

但这不太可能发生，我想这是可以接受的。

相关文章：