Как предотвратить повторные пробелы в текстовой области - PullRequest
Новая
       31

Как предотвратить повторные пробелы в текстовой области

4 голосов
/ 22 марта 2020

Я пытаюсь запретить пользователям вводить повторяющиеся пробелы в текстовой области. Любые пробелы подряд, я просто хочу, чтобы текстовая область игнорировалась.

Я пытаюсь просто заменить повторы на один пробел в моем обработчике onchange, выполнив это: value.replace(/\s+/g, ' ')

Это работает, однако, каретка всегда перемещается в конец текстовой области. Поэтому, если я помещаю курсор в середине предложения в текстовой области и дважды нажимаю пробел, курсор перемещается в конец текстовой области, что раздражает пользователя.

Я обнаружил, что могу использовать event.preventDefault() в обработчике onkeypress и он не перемещает курсор, однако, onkeypress не предоставляет новое значение ввода, поэтому я не знаю, есть ли повторяющиеся пробелы.

Есть идеи, как с этим справиться?

1 Ответ

2 голосов
/ 22 марта 2020

Вы можете нарезать значение текстовой области от начала до позиции каретки, а также от каретки до конца, затем заменить эти две половины, проверить длину первых, сложить их вместе и установить курсор на проверяемая длина: 

const textarea = document.querySelector('textarea');
textarea.addEventListener('input', () => {
  const { value } = textarea;
  const position = textarea.selectionStart;
  const p1 = value.slice(0, position).replace(/\s+/g, ' ');
  const p2 = value.slice(position).replace(/\s+/g, ' ');
  const p2Fixed = p1.endsWith(' ') && p2.startsWith(' ') ? p2.replace(/^\s+/, '') : p2;
  textarea.value = p1 + p2Fixed;
  textarea.selectionStart = p1.length;
  textarea.selectionEnd = p1.length;
});
<textarea columns=10 rows=5>
foo bar baz, try adding more spaces here
</textarea>
...