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

Posted

技术标签:

【中文标题】如何防止文本区域中的重复空格【英文标题】:How to prevent repeat spaces in a textarea 【发布时间】:2020-07-02 22:39:42 【问题描述】:

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

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

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

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

关于如何处理这个问题的任何想法?

【问题讨论】:

【参考方案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>

【讨论】:

我也考虑过手动移动插入符号,但我希望有更好的方法。但无论如何,您的示例代码无法正常工作。例如,键入the dog,然后将插入符号放在e 之后并按空格键。它仍然允许双空格。 编辑 - 没关系我看到你更新了你的答案,你的新代码确实可以正常工作:)

以上是关于如何防止文本区域中的重复空格的主要内容,如果未能解决你的问题,请参考以下文章

如何使用 CSS 来防止连字符导致 HTML 文本区域中的字符串被破坏?

jquery - 计算文本区域中的字符[重复]

用空格替换文本区域中的逗号、破折号和输入键

文本区域中的换行符[重复]

下划线文本区域中的部分文本[重复]

如何使用jQuery更改文本区域中的行数