如何防止文本区域中的重复空格
如何防止文本区域中的重复空格
提问于 2020-03-22 08:00:36
我试图阻止用户在文本区域中输入重复的空格。一行中的任何空格，我只希望文本区忽略它。
我尝试通过这样做来简单地在我的onchange处理程序中用一个空格替换重复：value.replace(/\s+/g, ' ')
这是可行的，但是，插入符号总是移动到文本区域的末尾。因此，如果我将插入符号放在文本区域中的句子中间并按空格键两次，插入符号将移动到文本区域的末尾，这会让用户感到厌烦。
我发现可以在onkeypress处理程序中使用event.preventDefault()，它不会移动光标，但是，onkeypress不提供输入的新值，所以我不知道是否有重复的空格。
你有什么办法处理这件事吗？
回答 1
Stack Overflow用户
回答已采纳
发布于 2020-03-22 08:04:13
您可以从开头到插入符号位置对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>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/60797093
复制相关文章
相似问题
社区富文本编辑器全新改版！诚邀体验～
全新交互，全新视觉，新增快捷键、悬浮工具栏、高亮块等功能并同时优化现有功能，全面提升创作效率和体验
腾讯云开发者
