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

Answer 2

如果值正在更改，则仅替换值并设置选择位置，然后将两者设置为选择的开始和结束，并将返回设置为1字符。

＆＃13;

 $(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;
       }
     
   });
 });

＆＃13;

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

＆＃13;

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

2 个答案: