Переместить курсор в конце ввода

Question

Это мой маленький плагин jquery, который заменяет каждый английский символ другими символами при наборе текста. Здесь все прекрасно работает, кроме случаев, когда я печатаю длинное слово, длиннее самого входа, курсор выходит за пределы ввода, последняя часть слова не видна. Просто зайдите на ссылку ниже и введите что-то (без пробела), и вы поймете, что я имею в виду.

http://jsfiddle.net/beLMf/

Есть ли решение, чтобы исправить это?

Answer 1

У вас есть две проблемы: вы добавляете текст в конец строки все время, если оно соответствует символам, которые вы ищете. Вы должны вместо этого сделать вставку в положение (курсор) каретки:

jQuery.fn.extend({ 
insertAtCaret: function(myValue){ 
    return this.each(function(i) { 
    if (document.selection) { 
     //For browsers like Internet Explorer 
     this.focus(); 
     sel = document.selection.createRange(); 
     sel.text = myValue; 
     this.focus(); 
    } 
    else if (this.selectionStart || this.selectionStart == '0') { 
     //For browsers like Firefox and Webkit based 
     var startPos = this.selectionStart; 
     var endPos = this.selectionEnd; 
     var scrollTop = this.scrollTop; 
     this.value = this.value.substring(0, startPos)+myValue+this.value.substring(endPos,this.value.length); 
     this.focus(); 
     this.selectionStart = startPos + myValue.length; 
     this.selectionEnd = startPos + myValue.length; 
     this.scrollTop = scrollTop; 
    } else { 
     this.value += myValue; 
     this.focus(); 
    } 
    }) 
} 
}); 

затем измените строку:

$this.val($this.val() + String.fromCharCode(i + 4304)); 

к

$this.insertAtCaret(String.fromCharCode(i + 4304)); 
$("#switcher").focus(); 
$(this).focus(); 

, что позволит решить проблему, а также решить проблема редактирования любой части строки.

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

Я сделал изменения в jsFiddle есть также функция захвата позиции курсора, что я думал об использовании чтобы решить вашу проблему. Он просто выводит на console.log, и вы можете удалить его.