JQuery -更改和按键事件产生了不同的结果
我有一个奇怪的按键事件的行为。
我有一个脚本，它删除逗号之前的空格，并在逗号后面添加一个空格。
$("#answer").keypress(function () {
this.value = $.map(this.value.split(","), $.trim).join(", ");
});如果我使用变更事件方法，它就会像预期的那样工作。
但是，如果我使用keypress，那么它对逗号很好，但是它开始移除单词之间的空格。
同时，尝试了不同的事件：input, click, keyup, keydown.但行为是一样的。
我试图找出是否有人有这个问题，但我似乎什么也找不到。知道有什么不对劲吗？或者它和另一个剧本有什么冲突？
回答 2
Stack Overflow用户
发布于 2020-02-29 07:30:27
只有当您离开输入焦点时，才会触发change事件。相反，keypress事件将在您按下键之后触发，但在按键导致元素的值被更改之前--这就是为什么您可以在keypress事件中调用event.preventDefault来阻止类型化字符进入输入：
$("#answer").keyup(function () {
console.log('keypress: "' + this.value + '"');
});
$("#answer").change(function () {
console.log('change: "' + this.value + '"');
});<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<textarea id="answer"></textarea>
一个keyup事件将在输入的值被更改后运行。
当有人打字时，当他们准备另一个单词的时候，往往会有一个尾随的空格。当您有一个侦听器每次有人键入一个键时运行时，如果尾随空间存在，它将被$.trim方法删除。
考虑使用正则表达式: match \s*,\s* (匹配零或多个空格，后面是逗号，后面是零或多个空格)，然后用逗号后面的空格替换：
$("#answer").on('keyup', function () {
this.value = this.value.replace(/\s*,\s*/g, ', ');
});<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<textarea id="answer"></textarea>
Stack Overflow用户
发布于 2020-02-29 07:33:19
按键
当浏览器注册键盘输入时，keypress事件被发送到元素。因此，当您键入类似于"abc“的内容，然后在其后面放置一个空格时，keypress事件将被触发，然后this.value.split(",")将导致["abc "]，但在它之后运行trim。所以，实际上所有的结果都是：
'abc '.split(',').map(x=>x.trim()).join(', ') //=> 'abc'因此，在keypress事件期间，所有的空格都会被删除。
change
当元素的值发生变化时，会将更改事件发送给元素。对于选择框、复选框和单选按钮，当用户使用鼠标进行选择时，事件将立即触发，但对于其他元素类型，事件将被推迟到元素失去焦点。
因此，该值从不等待任何particualr键盘输入，您的简单行为如下：
'abc def,abc def'.split(',').map(x=>x.trim()).join(', ')
//=> 'abc def, abc def'https://stackoverflow.com/questions/60462889
复制相似问题
腾讯云开发者
