Невозможно установить курсор в конце после изменения содержимого текстового поля

Question

Я должен написать код, который будет преобразовывать ввод текста в мой язык (Bangla).Для этого я обнаруживаю каждое нажатие клавиши, если оно попадает в границы AZ или 0-9, я пишу соответствующий код и, наконец, устанавливаю курсор на определенную позицию.

Теперь у меня проблема с типом <input type="textbox" />элемент, потому что я получаю правильную позицию курсора, я пишу в правильную позицию, но проблема в следующем:

Рассмотрим случай, когда вы набрали символ, где видимая область в текстовом поле только для 10 символов.В этом случае желаемым выводом будет: после того, как я перезаписал мое измененное значение в текстовое поле в 11-й позиции, в поле ввода должно отображаться положение: от 1 до 11, и курсор должен быть помещен в 11-ю позицию ....... Но в моем случаевидимая область остается в позиции от 0 до 10 символов (я имею в виду изначально, как это было)

Я испробовал все возможные решения, которые я нашел в stackoverflow, но не решил эту проблему.Я больше всего пробовал эту демонстрационную страницу: http://demo.vishalon.net/getset.htm

---

Код можно найти по адресу:

http://jsbin.com/abexeq/3/edit

и демо:

http://jsbin.com/abexeq/3/

---

Пожалуйста, помогите мне написать функцию writeFinalValue в верхней части HTML-части, чтобы эта проблема была решена.

Код:

/// <summary>Write finalText to the text/input box</summary>
Keyboard.prototype.writeFinalValue = function (finalText, caretPosition) {

    var scrollTop = this.textInputSource.scrollTop;

    if (typeof this.textInputSource.selectionStart == "number" && typeof this.textInputSource.selectionEnd == "number") {
        // Non-IE browsers and IE 9
        this.textInputSource.value = finalText;

        this.textInputSource.value = this.textInputSource.value;
        //        // Move the caret
        //        this.textInputSource.selectionStart = caretPosition;
        //        this.textInputSource.selectionEnd = caretPosition;
    }
    else if (document.selection && document.selection.createRange) {
        // For IE up to version 8
        var selectionRange = document.selection.createRange();
        var textInputRange = this.textInputSource.createTextRange();
        var precedingRange = this.textInputSource.createTextRange();
        var bookmark = selectionRange.getBookmark();
        textInputRange.moveToBookmark(bookmark);
        precedingRange.setEndPoint("EndToStart", textInputRange);
        var start = precedingRange.text.length;
        var end = start + selectionRange.text.length;

        this.value = finalText;

        //        // Move the caret
        //        textInputRange = this.createTextRange();
        //        textInputRange.collapse(true);
        //        textInputRange.move("character", start - (this.textInputRange.value.slice(0, start).split("\r\n").length - 1));
        //        textInputRange.select();
    }

    this.textInputSource.focus();
    this.textInputSource.scrollTop = scrollTop;

    // move caret
    if (this.textInputSource.setSelectionRange) {
        this.textInputSource.setSelectionRange(caretPosition, caretPosition);
//        this.textInputSource.value = this.textInputSource.value;
    }
    else if (this.textInputSource.createTextRange) {
        var range = this.textInputSource.createTextRange();
        range.collapse(true);
        range.moveEnd('character', caretPosition);
        range.moveStart('character', caretPosition);
        range.select();
    }
}

Спасибо.

NB Мне нужно предложение для Firefox / Chrome в основном потому, что Internet Explorer не моя забота.

Answer 1

Самым надежным кросс-браузерным решением, которое я видел для установки фокуса / курсора в конце текстового поля, является плагин jQuery PutCursorAtEnd . Я бы порекомендовал вам использовать этот плагин для решения этой проблемы.

Обновление

Я опробовал его, и он фактически прокручивается до конца текстового поля, если текст переполняется. В вашем примере (http://jsbin.com/unejup/6), похоже, тоже работает, но только для второго нажатия на кнопку «Установить положение».

<script>
// http://plugins.jquery.com/project/PutCursorAtEnd
$(function () {
    $('#foo').putCursorAtEnd();
});
</script>

<input type="text" id="foo" value="abcdefghijklmnopqrstuvwxyz" />