0

到目前为止，我已经使用下面的方法来防止我的文本字段中出现多个空格。除非在字符串中间插入字母，否则这很好用。在这个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" />
4

2 回答 2

1

发生的事情是您的事件在将“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 使用。

于 2013-09-12T12:00:22.107 回答
1

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

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

$('#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/

于 2013-09-12T11:45:10.290 回答