Подтвердить что ты не робот

Как вы можете переместить курсор на последнюю позицию текстового поля в Javascript?

У меня есть текстовая область и кнопка на форме. В текстовом поле уже есть текст. Я бы хотел, чтобы курсор переместился в последнюю позицию в текстовой области при нажатии кнопки.

Возможно ли это?

4b9b3361

Ответ 1

Под "последней позицией", вы имеете в виду конец текста?

Изменение значения .value поля формы переместит курсор в конец в каждом браузере, кроме IE. В IE вы должны грязно и сознательно манипулировать выбором, используя нестандартные интерфейсы:

    if (browserIsIE) {
        var range= element.createTextRange();
        range.collapse(false);
        range.select();
    } else {
        element.focus();
        var v= element.value();
        element.value= '';
        element.value= v;
    }

Или вы хотите вернуть курсор обратно в место, которое было ранее, в последний раз, когда текстовая область была сфокусирована?

В каждом браузере, кроме IE, это уже произойдет, вызвав 'element.focus(); браузер запоминает последнюю позицию курсора/выбора на каждый вход и помещает ее обратно в фокус.

Это было бы довольно сложно воспроизвести в IE. Вам нужно будет все время проверять, где находится курсор/выбор, и запомнить эту позицию, если она была во входном элементе, а затем выбрать позицию для данного элемента при нажатии кнопки и ее восстановлении. Это связано с некоторыми довольно утомительными манипуляциями с document.selection.createRange().

Я ничего не знаю о jQuery, который поможет вам в этом, но возможно, где-то может быть плагин?

Ответ 2

xgMz ответ был лучшим для меня. Вам не нужно беспокоиться о браузере:

var html = $("#MyTextArea").val();
$("#MyTextArea").focus().val("").val(html);

И вот быстрое расширение jQuery, которое я написал для этого в следующий раз:

; (function($) {
    $.fn.focusToEnd = function() {
        return this.each(function() {
            var v = $(this).val();
            $(this).focus().val("").val(v);
        });
    };
})(jQuery);

Используйте это:

$("#MyTextArea").focusToEnd();

Ответ 3

Вы также можете сделать это:

$(document).ready(function()
{
    var el = $("#myInput").get(0);

    var elemLen = el.value.length;

    el.selectionStart = elemLen;
    el.selectionEnd = elemLen;

    el.focus();
});​

Этот код работает как для input, так и для textarea. Протестировано с последними браузерами: Firefox 23, IE 11 и Chrome 28.

jsFiddle можно найти здесь: http://jsfiddle.net/cG9gN/1/

Источник: fooobar.com/questions/166804/...

Ответ 5

Это то, что я использую для текстовых полей внутри своих onclick или других событий и, кажется, отлично работает для FireFox и IE 7 и 8. Он позиционирует курсор в конце текста вместо фронта.

this.value = "some text I want to pre-populate";
this.blur();
this.focus();

Ответ 6

Чтобы установить фокус мыши и переместить курсор на конец ввода. Его работа в каждом браузере, его простая логика здесь.

input.focus();
tmpStr = input.val();
input.val('');
input.val(tmpStr);

Ответ 7

Я немного модифицировал расширение @mkaj для поддержки значения по умолчанию

; (function($) {
    $.fn.focusToEnd = function(defaultValue) {
        return this.each(function() {
            var prevValue = $(this).val();
            if (typeof prevValue == undefined || prevValue == "") {
                prevValue = defaultValue;
            }
            $(this).focus().val("").val(prevValue);
        });
    };
})(jQuery);

// See it in action here
$(element).focusToEnd("Cursor will be at my tail...");