时间戳

首页 > 解决方案 > JQuery - 更改和按键事件给出不同的结果

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

问题描述

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

我有一个脚本可以删除逗号前的空格并在逗号后添加一个空格。

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

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

在此处输入图像描述

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

在此处输入图像描述

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

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

标签： javascriptjqueryjquery-events

解决方案

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事件。

当有人打字时，结尾通常会有一个尾随空格，此时他们正在准备另一个单词。当您有一个在每次有人键入键时运行的侦听器时，如果存在尾随空格，则该$.trim方法将删除它。

考虑改用正则表达式：匹配\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>

推荐阅读