javascript - 使用替换时停止光标与值重叠

Question

我想知道当我将光标放在值中间时如何防止重叠值的行为。之后，我尝试将双空格替换为一个空格，但它与我的文本值重叠，同时将双空格替换为单空格。

这是代码示例。有什么建议可以阻止这种行为吗？

 $(document).ready(function() {
   $("#txtInput").keyup(
     function(event) {
     
       var position = event.target.selectionStart;
       event.target.value = event.target.value.replace(/  +/g, ' ');
       event.target.selectionEnd = position;
     
   });
 });

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

Answer 1

你可以检查是否真的修改了字符串的长度，如果修改了则需要从位置中减去1。

 $(document).ready(function() {
   $("#txtInput").keyup(
     function(event) {
       var len = event.target.value.length;
       var position = event.target.selectionStart;
       event.target.value = event.target.value.replace(/  +/g, ' ');
       if (len !== event.target.value.length) --position;
       event.target.selectionEnd = position;
     
   });
 });

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