如何防止文本区域中的重复空格

Question

我试图阻止用户在文本区域中重复输入 spaces。任何连续的 spaces，我只想忽略文本区域。

我试图通过这样做在我的 onchange 处理程序中简单地用单个 space 替换重复：value.replace(/\s+/g, ' ')

这确实有效，但是，插入符号总是移动到文本区域的末尾。因此，如果我将插入符号放在文本区域的句子中间并按 space 两次，插入符号会移动到文本区域的末尾，这对用户来说很烦人。

我发现我可以在 onkeypress 处理程序中使用 event.preventDefault() 并且它不会移动光标，但是 onkeypress 不提供输入的新值,所以不知道有没有重复spaces.

关于如何处理这个问题有什么想法吗？

Answer 1

你可以将textarea的值从开头切片到插入符号位置，也可以从插入符号切片到末尾，然后替换这两半，检查第一部分的长度，把它们放在一起，然后设置光标到检查的长度：

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>

如何防止文本区域中的重复空格

How to prevent repeat spaces in a textarea

html

javascript

textarea

input