JQuery

Question

我有一个奇怪的按键事件行为。

我有一个删除逗号前的 space 并在逗号后添加 space 的脚本。

$("#answer").keypress(function () {
  this.value = $.map(this.value.split(","), $.trim).join(", ");
});

如果我使用更改事件方法，它会按预期工作。

但是，如果我使用按键，那么逗号可以正常工作，但它会开始删除单词之间的 spaces。

此外，尝试了不同的事件：input, click, keyup, keydown...但行为是相同的。

我试图找出是否有人遇到过这个问题，但我似乎找不到任何东西。知道可能出什么问题了吗？或者它可能与另一个脚本有某种冲突？

Answer 1

change 事件只有在您对输入进行散焦时才会触发。相比之下，keypress 事件将在您按下按键后触发，但在按键导致元素的值被更改之前 - 这就是为什么您可以在内部调用 event.preventDefault keypress 防止键入的字符进入输入的事件：

$("#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 事件将运行在输入的值被改变之后。

当某人正在打字时，当他们准备输入另一个词时，末尾通常会有尾随 space。当你有一个侦听器，每次有人键入一个键时运行s，如果尾随 space 存在，它将被 $.trim 方法删除。

考虑改用正则表达式：匹配 \s*,\s*（匹配零个或多个 space，后跟一个逗号，然后是零个或多个 space），然后替换为逗号后跟 space:

$("#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>

Answer 2

按键

当浏览器注册键盘输入时，keypress事件被发送到一个元素。因此，当您键入 "abc" 之类的内容然后在其后放置 space 时，keypress 事件将被触发，然后 this.value.split(",") 将导致 ["abc "] 但您运行 trim 之后。所以，实际结果是这样的：

'abc '.split(',').map(x=>x.trim()).join(', ') //=> 'abc'

因此在 keypress 事件期间删除了所有 space。

改变

当元素的值改变时，change 事件被发送到一个元素。对于 select 框、复选框和单选按钮，当用户使用鼠标进行 selection 时，事件会立即触发，但对于其他元素类型，事件会延迟到元素失去焦点。

因此，该值从不等待任何特定的键盘输入，而您的行为很简单，例如：

'abc def,abc def'.split(',').map(x=>x.trim()).join(', ') 
//=> 'abc def, abc def'

JQuery - 更改和按键事件给出了不同的结果

JQuery - change and keypress events are giving different results

javascript

jquery-events