Текстовый курсор перемещается влево после каждого символа

Question

Это ошибка, связанная с кодом, который я сделал.

Я делал поле проверки длины текста, придумал какой-то рабочий код. Однако что-то, что я делаю здесь, заставляет курсор Text перемещаться влево каждый раз, когда вы печатаете, что означает, что напечатанный текст выходит назад или в беспорядке.

Что происходит ниже, что может быть причиной этого? Я бы предположил, наверное, сращивание?

JSFiddle и JQuery ниже

$(function(){ 

    var charLimit = 10; 

    $('.input').keypress(function(e){ 
     if (e.which > 0){ 
      var string = $(this).text().split(""); 
      for(i=0;i<charLimit;i++){ 
       if(string[i] !== undefined){ 
        string.splice((charLimit-1),0,"<span class='error'>"); 
        string.push("</span>"); 
       } 
      } 
      $(this).html(string.join("")); 
     } 
    }); 

}); 

Answer 1

Используйте эту функцию, чтобы всегда поместить курсор в конец:

function placeCaretAtEnd(el) { 
    el.focus(); 
    if (typeof window.getSelection != "undefined" 
      && typeof document.createRange != "undefined") { 
     var range = document.createRange(); 
     range.selectNodeContents(el); 
     range.collapse(false); 
     var sel = window.getSelection(); 
     sel.removeAllRanges(); 
     sel.addRange(range); 
    } else if (typeof document.body.createTextRange != "undefined") { 
     var textRange = document.body.createTextRange(); 
     textRange.moveToElementText(el); 
     textRange.collapse(false); 
     textRange.select(); 
    } 
} 

Используйте его после

$(this).html(string.join("")); 

как это:

placeCaretAtEnd(document.getElementById(".input")); 

Вы могли бы искать для этого: http://jsfiddle.net/nh9hbxdf/

Это может быть достигнуто с помощью некоторых CSS трюков:

здесь является обновленный код:

<p id="output"></p> 
<textarea></textarea> 
<style> 
    textarea, #output { 
       width: 500px; 
       height: 10em; 
       padding: 0.2em; 
       margin: 0.2em; 
       box-sizing: border-box; 
       font: 13px arial; 
       border: 1px solid silver; 
       white-space: pre-wrap; 
      } 

      textarea { 
       position: relative; 
       -webkit-text-fill-color: transparent; 
       overflow: auto; 
      } 

      #output { 
       position: absolute; 
       pointer-events: none; 
       z-index: 1; 
      } 

      #output span:first-of-type { 
       color: red; 
       /*background-color: blue;*/ 
      } 
.error{ 
    color:red; 
} 

<script> 

$(document).ready(function(){ 
       $('textarea').on('input', function() { 
        $('#output').html(this.value.replace(/^(.{10})(.*)$/, '$1<span class="error" contenteditable>$2</span>')); 
       }); 

       $('textarea').focus(); 
      });  

</script>