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

Question

我已经附加了小提琴的链接来模拟我遇到的问题。

例如： 我输入了 12345>光标指向中间 12|345>键入"空格"> 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" />