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

Question

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

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

Answer 1

Ответ 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();

Answer 2

Под «последней позицией» подразумевается конец текста?

Изменение «.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, которое помогло бы вам сделать это, но где-то может быть плагин?

Answer 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/

Источник: https://stackoverflow.com/a/12654402/114029

Answer 4

Вы можете использовать это https://github.com/DrPheltRight/jquery-caret

$('input').caretToEnd();

Answer 5

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

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

Answer 6

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

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

Answer 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...");