JQuery - события изменения и нажатия клавиш дают разные результаты

Question

У меня странное поведение события нажатия клавиши.

У меня есть скрипт, который удаляет пробел перед запятой и добавляет пробел после запятой.

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

Он работает как ожидается, если я использую метод события изменения.

Однако, если я использую нажатие клавиши, то он отлично работает с запятыми, но начинает удалять пробелы между словами.

Также пробовали с разными событиями: input, click, keyup, keydown ... но поведение то же самое.

Я пытался выяснить, была ли у кого-то эта проблема, но я не могу ничего найти. Есть идеи, что может быть не так? А может, это как-то противоречит другому сценарию?

Answer 1

нажатие клавиши

Событие keypress отправляется элементу, когда браузер регистрирует ввод с клавиатуры. Таким образом, когда вы набираете что-то вроде «ab c», а затем ставите пробел после него, будет вызвано событие keypress, а затем this.value.split(",") приведет к ["abc "], но вы запустите триммирование после него. Итак, результат на самом деле выглядит так:

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

Таким образом, все пробелы удаляются во время события keypress.

change

Событие изменения отправляется элементу при изменении его значения. Для полей выбора, флажков и переключателей событие вызывается немедленно, когда пользователь делает выбор с помощью мыши, но для других типов элементов событие откладывается до тех пор, пока элемент не потеряет фокус.

Итак, Значение никогда не ждет какого-либо конкретного ввода с клавиатуры, а вы просто ведете себя так:

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

Answer 2

Событие 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.

Попробуйте вместо этого использовать регулярное выражение: 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>