javascript - 触发替换中的正则表达式时光标向后移动，JavaScript

Question

我已将链接附加到 fiddle 以模拟我遇到的问题。

例如: 我输入了 12345 > 将光标指向中间 12|345 > 输入“空格” > 123|45

输入“空格”后光标会向后移动。

问题:如何让它保持在原来的位置？

Here is the link to fiddle

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" />