替代字符串替换以防止文本框中有多个空格

alternative to string replace to prevent multiple spaces in text box

本文关键字：空格 文本 字符串 替换      更新时间：2023-09-26

到目前为止，我一直使用以下方法来防止文本字段中出现多个空格。除非在字符串中间插入字母，否则这工作正常。在此 JSfiddle 演示中，您可以看到，如果单击"a"和"c"之间的光标并键入"b"，则会将新字母添加到字符串末尾，拼写为"acb"而不是"abc"。我希望有人可能知道字符串替换的替代方案，这可能会解决这个问题。谢谢。

   $('#tBox').bind('DOMAttrModified textInput input change paste',function(){
     var sspace = $(this).val().replace(/ +/g, ' ');
       $(this).val(sspace);
  });
<input type = "text" id = "tBox" />

问题是因为你用 change 事件更新值，这发生在内容更新之前，所以通过将输入值重置为其最新值"ac"，光标将自己定位在文本的末尾，然后捕获"b"，所以你得到'acb'。

我更新了您的 jsfiddle 以使用 keyup 事件而不是更改事件，并在更新输入内容之前验证文本是否已更改

$('#tBox').bind('DOMAttrModified textInput input keyup paste',function(){
 var sspace = $(this).val().replace(/ +/g, ' ');
    if ($(this).val() != sspace)
        $(this).val(sspace);
  });

http://jsfiddle.net/Ubhm9/2/

正在发生的事情是，您的事件在将"b"插入文本字段之前捕获了更改。 即，通过您的 abc/acb 示例，您有事件的顺序：

1） 用户按"B"

2） 事件处理程序运行时，输入值仍以"ac"形式给出。

3） 处理程序将输入的值设置为"ac"，将光标移动到输入的末尾

4） 浏览器在光标位置插入"b"字符，现在位于字段的末尾

我唯一能想到做的就是只在需要时做（3），即：

$('#tBox').bind('DOMAttrModified textInput input change paste',function(){
 var sspace = this.value.replace(/ +/g, ' ');
    if (this.value !== sspace) {
        this.value = sspace;
    }
  });

在输入多个空格时，这仍然会将光标移动到末尾，但这是一个改进。

另外，我摆脱了 $（this）.val（） 不需要的 jQuery 使用。

相关文章：