Установка положения курсора на начало следующего ввода

Question

Я пытаюсь установить положение курсора в начало следующего элемента ввода. По какой-то причине он устанавливает один символ слева, а не в начале.

Я пытаюсь сделать это, только когда пользователь находится в конце ввода, в котором они находятся, и нажимает клавишу со стрелкой вправо.

jsfiddle example

HTML

<p class="after"> 
    <input type="text" value="something1 this is something else" name="AnswerData0" /> 
    <input type="text" value="something2" name="AnswerData1" /> 
    <input type="text" value="something3" name="AnswerData2" /> 
    <input type="text" value="something4" name="AnswerData3" /> 
</p> 

JQuery

$(".after input[name^='AnswerData']").each(function() { 
     var $this = $(this);   
     $this.attr("contenteditable", "true") 
      .css({ 
       "border": "1px solid #000" 
      }); 
    }); 

    $("input[name^='AnswerData']").keyup(function(event){ 
     var currentVal = $(this).val(); 
     $(this).attr("value", currentVal); 
    }); 

    // handle using "right" key at the end of a span 
    $("input[name^='AnswerData']").keydown(function(event){ 
     if (event.which == 39 && $(this).getCursorPosition() == $(this).val().length) { 
      $(this).next("input[name^='AnswerData']").selectRange(0, 0); 
//   alert($(this).getCursorPosition()); 
     } 
    }); 

$.fn.selectRange = function(start, end) { 
    if(!end){ 
     end = start; 
    } 
    return this.each(function() { 
     var range; 

     if (this.setSelectionRange) { 
      this.focus(); 
      this.setSelectionRange(start, end); 
     } else if (this.createTextRange) { 
      range = this.createTextRange(); 
      range.collapse(true); 
      range.moveEnd('character', end); 
      range.moveStart('character', start); 
      range.select(); 
     } 
    }); 
}; 

$.fn.getCursorPosition = function() { 
    var el = $(this).get(0); 
    var pos = 0; 
    if('selectionStart' in el) { 
     pos = el.selectionStart; 
    } else if('selection' in document) { 
     el.focus(); 
     var Sel = document.selection.createRange(); 
     var SelLength = document.selection.createRange().text.length; 
     Sel.moveStart('character', -el.value.length); 
     pos = Sel.text.length - SelLength; 
    } 
    return pos; 
} 

Кто-нибудь знает, почему это происходит? Я что-то пропустил в своем jQuery?

Answer 1

Попробуйте

if (event.which == 39 && $(this).getCursorPosition() == ($(this).val().length -1)) {