使用替換時停止光標與值重疊

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

只有替換值，並設置選擇位置，如果值是變化的，然後設置兩者開始和選擇結束，並且由一個設置回字符。

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

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

Answer 2

你可以檢查，如果你確實修改字符串的長度，如果你這樣做，你需要從位置減去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=""/>