如何防止在文本区域中重复出现空格

Question

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

我正在尝试通过在onchange处理程序中的单个空格简单地替换重复：value.replace(/\s+/g, ' ')

这确实起作用，但是，插入标记始终移至文本区域的末尾。因此，如果我将插入符号放在文本区域中句子的中间并按两次空格，则插入符号将移动到文本区域的结尾，这会令用户感到烦恼。

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

关于如何处理此问题的任何想法？

Answer 1

您可以从开始到插入符的位置切开textarea值，也可以从插入符到末端切开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>