Используйте JavaScript, чтобы поместить курсор в конец текста в элементе ввода текста

Question

Каков наилучший способ (и я полагаю, самый простой способ) поместить курсор в конец текста во входном текстовом элементе с помощью JavaScript - после того, как фокус был установлен на элемент?

Answer 1

Эта проблема интересная. Самое странное в этом то, что ни одно решение, которое я нашел, не решило проблему полностью.

+++++++ РЕШЕНИЕ +++++++

1. Вам нужна функция JS, например:

   function moveCursorToEnd(obj) {
   
     if (!(obj.updating)) {
       obj.updating = true;
       var oldValue = obj.value;
       obj.value = '';
       setTimeout(function(){ obj.value = oldValue; obj.updating = false; }, 100);
     }
   
   }
   

2. Вам нужно позвонить этому парню в событиях onfocus и onclick.

   <input type="text" value="Test Field" onfocus="moveCursorToEnd(this)" onclick="moveCursorToEnd(this)">
   

ЭТО РАБОТАЕТ НА ВСЕХ УСТРОЙСТВАХ БРАУЗЕРОВ !!!!

Answer 2

Принятие некоторых ответов ... создание однострочного jquery.

$('#search').focus().val($('#search').val());

Answer 3

Я только что обнаружил, что в iOS установка свойства textarea.textContent будет каждый раз помещать курсор в конец текста в элементе textarea. Поведение было ошибкой в ​​моем приложении, но кажется, что вы могли бы использовать его намеренно.

Answer 4

Если поле ввода просто требует статического значения по умолчанию, я обычно делаю это с помощью jQuery:

$('#input').focus().val('Default value');

Это работает во всех браузерах.

Answer 5

Хотя это может быть старый вопрос с множеством ответов, я столкнулся с подобной проблемой, и ни один из ответов не был тем, что я хотел, и / или был плохо объяснен. Проблема со свойствами selectionStart и selectionEnd заключается в том, что они не существуют для номера типа ввода (хотя вопрос был задан для типа текста, я считаю, что это может помочь другим, у которых могут быть другие типы ввода, на которые им нужно сфокусироваться). Поэтому, если вы не знаете, является ли тип ввода, на котором будет фокусироваться функция, номером типа или нет, вы не сможете использовать это решение.

Решение, которое работает в разных браузерах и для всех типов ввода, довольно просто:

• получить и сохранить значение ввода в переменной
• фокусировка ввода
• установить значение ввода на сохраненное значение

Таким образом, курсор находится в конце элемента ввода.
Таким образом, все, что вам нужно сделать, это что-то вроде этого (используя jquery, при условии, что селектор элемента, на который нужно сфокусироваться, доступен через атрибут данных data-focus-element) выбранного элемента, и функция выполняется после нажатия на кнопку «.foo». элемент):

$('.foo').click(function() {
    element_selector = $(this).attr('data-focus-element');
    $focus = $(element_selector);
    value = $focus.val();
    $focus.focus();
    $focus.val(value);
});

Почему это работает? Просто, когда вызывается .focus (), фокус будет добавлен в начало элемента ввода (что является основной проблемой), игнорируя тот факт, что элемент ввода уже имеет значение в нем. Однако при изменении значения ввода курсор автоматически помещается в конец значения внутри элемента ввода. Поэтому, если вы переопределите значение тем же значением, которое было ранее введено во ввод, значение будет выглядеть нетронутым, однако курсор переместится в конец.

Answer 6

var valsrch = $('#search').val();
$('#search').val('').focus().val(valsrch);

Answer 7

Я тоже столкнулся с такой же проблемой. Наконец это сработает для меня:

jQuery.fn.putCursorAtEnd =  = function() {

  return this.each(function() {

    // Cache references
    var $el = $(this),
        el = this;

    // Only focus if input isn't already
    if (!$el.is(":focus")) {
     $el.focus();
    }

    // If this function exists... (IE 9+)
    if (el.setSelectionRange) {

      // Double the length because Opera is inconsistent about whether a carriage return is one character or two.
      var len = $el.val().length * 2;

      // Timeout seems to be required for Blink
      setTimeout(function() {
        el.setSelectionRange(len, len);
      }, 1);

    } else {

      // As a fallback, replace the contents with itself
      // Doesn't work in Chrome, but Chrome supports setSelectionRange
      $el.val($el.val());

    }

    // Scroll to the bottom, in case we're in a tall textarea
    // (Necessary for Firefox and Chrome)
    this.scrollTop = 999999;

  });

};

Вот как мы можем назвать это:

var searchInput = $("#searchInputOrTextarea");

searchInput
  .putCursorAtEnd() // should be chainable
  .on("focus", function() { // could be on any event
    searchInput.putCursorAtEnd()
  });

Это работает для меня в сафари, IE, Chrome, Mozilla. На мобильных устройствах я не пробовал это.

Answer 8

Хотя я отвечаю слишком поздно, но для будущего запроса это будет полезно. И это также работает в contenteditable div.

Откуда вам нужно установить фокус в конце; напишите этот код-

var el = document.getElementById("your_element_id");
placeCaretAtEnd(el);

А функция -

function placeCaretAtEnd(el) {
    el.focus();
    if (typeof window.getSelection != "undefined"
            && typeof document.createRange != "undefined") {
        var range = document.createRange();
        range.selectNodeContents(el);
        range.collapse(false);
        var sel = window.getSelection();
        sel.removeAllRanges();
        sel.addRange(range);
    } else if (typeof document.body.createTextRange != "undefined") {
        var textRange = document.body.createTextRange();
        textRange.moveToElementText(el);
        textRange.collapse(false);
        textRange.select();
    }
}

Answer 9

Я хотел поместить курсор в конец элемента "div", где contenteditable = true, и я получил решение с кодом Xeoncross :

<input type="button" value="Paste HTML" onclick="document.getElementById('test').focus(); pasteHtmlAtCaret('<b>INSERTED</b>'); ">

<div id="test" contenteditable="true">
    Here is some nice text
</div>

И эта функция делает магию:

 function pasteHtmlAtCaret(html) {
    var sel, range;
    if (window.getSelection) {
        // IE9 and non-IE
        sel = window.getSelection();
        if (sel.getRangeAt && sel.rangeCount) {
            range = sel.getRangeAt(0);
            range.deleteContents();

            // Range.createContextualFragment() would be useful here but is
            // non-standard and not supported in all browsers (IE9, for one)
            var el = document.createElement("div");
            el.innerHTML = html;
            var frag = document.createDocumentFragment(), node, lastNode;
            while ( (node = el.firstChild) ) {
                lastNode = frag.appendChild(node);
            }
            range.insertNode(frag);

            // Preserve the selection
            if (lastNode) {
                range = range.cloneRange();
                range.setStartAfter(lastNode);
                range.collapse(true);
                sel.removeAllRanges();
                sel.addRange(range);
            }
        }
    } else if (document.selection && document.selection.type != "Control") {
        // IE < 9
        document.selection.createRange().pasteHTML(html);
    }
}

Работает нормально для большинства браузеров, пожалуйста, проверьте его, этот код помещает текст и помещает фокус в конец текста в элементе div (не элемент input)

https://jsfiddle.net/Xeoncross/4tUDk/

Спасибо, Xeoncross

Answer 10

Мне очень нравится принятый ответ, но он перестал работать в Chrome. В Chrome, чтобы курсор дошел до конца, необходимо изменить входное значение. Решение заключается в следующем:

<input id="search" type="text" value="mycurrtext" size="30" 
   onfocus="var value = this.value; this.value = null; this.value = value;" name="search"/>