Question

我已经附上了用来模拟我遇到的问题的链接。

例如：我输入了12345＆gt;将光标指向中间12 | 345＆gt;输入“space”＆gt; 123 | 45

键入“空格”后，光标将向后移动。

问题：如何让它与之前保持在同一个地方？

document.querySelector("#removeSpace").onkeyup =  function()
{

    var start = this.selectionStart,
        end = this.selectionEnd;

    this.value = this.value.replace(/\s/g,"");
    this.setSelectionRange(start, end);
};

Answer 1

您需要检查空格是否匹配，并设置偏移量等于匹配长度的选择。但是，为了避免空白输入，您可以使用input事件：

$(function(){
  $('#removeSpace').bind('input', function(){
      var start = this.selectionStart,
            end = this.selectionEnd;
      var offset=0;
      this.value = this.value.replace(/\s+/g, function($0) {offset=$0.length; return "";});
      if (offset > 0)
    	   this.setSelectionRange(start-offset, end-offset);
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input id="removeSpace" type="Text" />

replace(/\s+/g, function($0) {offset=$0.length; return "";})部分匹配1个或多个空格，并通过$0变量将它们传递给回调。其长度分配给offset变量，并从当前开始和结束光标位置中减去。 return ""删除匹配项，找到所有空格。

使用keyup：

可以应用相同的逻辑来修复您的解决方案

document.querySelector("#removeSpace").onkeyup =  function()
{
    
    var start = this.selectionStart,
        end = this.selectionEnd;
    var offset=0;
    this.value = this.value.replace(/\s+/g, function($0) {offset=$0.length; return "";});
    if (offset > 0)
    	this.setSelectionRange(start-offset, end-offset);
};

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input id="removeSpace" type="Text" />

当在replace，JavaScript中触发正则表达式时光标向后移动

1 个答案: