Question

到目前为止，我使用了以下方法来防止文本字段中存在多个空格。除非在字符串的中间插入字母，否则这样可以正常工作。在这个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" />

Answer 1

问题是因为你用更新事件更新了值，这发生在内容更新之前，所以通过将输入值重置为它的最新值'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/

Answer 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使用。

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

2 个答案: