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

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

Я столкнулся с этой же проблемой (после установки фокуса через RJS / prototype) в IE. Firefox уже оставлял курсор в конце, когда уже есть значение для поля. IE заставлял курсор к началу текста.

Решение, к которому я пришел, заключается в следующем:

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

Это работает как в IE7, так и в FF3

Есть простой способ заставить его работать в большинстве браузеров.

this.selectionStart = this.selectionEnd = this.value.length;

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

setTimeout(function(){ that.selectionStart = that.selectionEnd = 10000; }, 0);

Использование jQuery (для установки слушателя, но это не обязательно)

$('#el').focus(function(){
  var that = this;
  setTimeout(function(){ that.selectionStart = that.selectionEnd = 10000; }, 0);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input id='el' type='text' value='put cursor at end'>

Использование Vanilla JS (заимствование addEventфункции из этого ответа )

// Basic cross browser addEvent
function addEvent(elem, event, fn){
if(elem.addEventListener){
  elem.addEventListener(event, fn, false);
}else{
  elem.attachEvent("on" + event,
  function(){ return(fn.call(elem, window.event)); });
}}
var element = document.getElementById('el');

addEvent(element,'focus',function(){
  var that = this;
  setTimeout(function(){ that.selectionStart = that.selectionEnd = 10000; }, 0);
});

<input id='el' type='text' value='put cursor at end'>

Причуды

Chrome имеет странную причуду, когда событие фокусировки срабатывает до того, как курсор перемещается в поле; что портит мое простое решение. Два варианта исправить это:

1. Вы можете добавить тайм-аут 0 мс (для отложить операцию, пока стек не очистится )
2. Вы можете изменить событие с focusнаmouseup . Это было бы довольно раздражающим для пользователя, если вы все еще не отслеживали фокус. Я не очень люблю ни один из этих вариантов.

Кроме того, @vladkras указал, что некоторые более старые версии Opera неправильно вычисляют длину, когда у нее есть пробелы. Для этого вы можете использовать огромное число, которое должно быть больше вашей строки.

Попробуйте это, это сработало для меня:

//input is the input element

input.focus(); //sets focus to element
var val = this.input.value; //store the value of the element
this.input.value = ''; //clear the value of the element
this.input.value = val; //set that value back.  

Для перемещения курсора в конец сначала ввод должен быть сфокусирован, а затем при изменении значения он перейдет в конец. Если вы установите то же значение .value, оно не изменится в Chrome.

Немного поработав с этим, я обнаружил, что лучше всего использовать эту setSelectionRangeфункцию, если браузер ее поддерживает; если нет, вернитесь к использованию метода в ответе Майка Берроу (т.е. замените значение на себя).

Я также устанавливаю scrollTopвысокое значение в случае, если мы находимся в режиме вертикальной прокрутки textarea. (Использование произвольно высокого значения кажется более надежным, чем $(this).height()в Firefox и Chrome.)

Я сделал это как плагин jQuery. (Если вы не используете JQuery, я надеюсь, вы все еще можете получить суть достаточно легко.)

Я тестировал в IE6, IE7, IE8, Firefox 3.5.5, Google Chrome 3.0, Safari 4.0.4, Opera 10.00.

Он доступен на jquery.com как плагин PutCursorAtEnd . Для вашего удобства код для версии 1.0 выглядит следующим образом:

// jQuery plugin: PutCursorAtEnd 1.0
// http://plugins.jquery.com/project/PutCursorAtEnd
// by teedyay
//
// Puts the cursor at the end of a textbox/ textarea

// codesnippet: 691e18b1-f4f9-41b4-8fe8-bc8ee51b48d4
(function($)
{
    jQuery.fn.putCursorAtEnd = function()
    {
    return this.each(function()
    {
        $(this).focus()

        // If this function exists...
        if (this.setSelectionRange)
        {
        // ... then use it
        // (Doesn't work in IE)

        // Double the length because Opera is inconsistent about whether a carriage return is one character or two. Sigh.
        var len = $(this).val().length * 2;
        this.setSelectionRange(len, len);
        }
        else
        {
        // ... otherwise replace the contents with itself
        // (Doesn't work in Google Chrome)
        $(this).val($(this).val());
        }

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

<script type="text/javascript">  
    function SetEnd(txt) {  
      if (txt.createTextRange) {  
       //IE  
       var FieldRange = txt.createTextRange();  
       FieldRange.moveStart('character', txt.value.length);  
       FieldRange.collapse();  
       FieldRange.select();  
       }  
      else {  
       //Firefox and Opera  
       txt.focus();  
       var length = txt.value.length;  
       txt.setSelectionRange(length, length);  
      }  
    }   
</script>  

Эта функция работает для меня в IE9, Firefox 6.x и Opera 11.x

Я попробовал следующее с довольно большим успехом в Chrome

$("input.focus").focus(function () {
    var val = this.value,
        $this = $(this);
    $this.val("");

    setTimeout(function () {
        $this.val(val);
    }, 1);
});

Быстрое изложение:

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

Затем он ждет 1 миллисекунду и снова вводит старое значение.

Это 2019 год, и ни один из вышеперечисленных методов не работал для меня, но этот сделал, взятый из https://css-tricks.com/snippets/javascript/move-cursor-to-end-of-input/

function moveCursorToEnd(id) {
  var el = document.getElementById(id) 
  el.focus()
  if (typeof el.selectionStart == "number") {
      el.selectionStart = el.selectionEnd = el.value.length;
  } else if (typeof el.createTextRange != "undefined") {           
      var range = el.createTextRange();
      range.collapse(false);
      range.select();
  }
}

<input id="myinput" type="text" />
<a href="#" onclick="moveCursorToEnd('myinput')">Move cursor to end</a>

Просто. При редактировании или изменении значений сначала установите фокус, а затем установите значение.

$("#catg_name").focus();
$("#catg_name").val(catg_name);

Тем не менее, промежуточная переменная нужна, (см. Var val =), иначе курсор ведет себя странно, он нам нужен в конце.

<body onload="document.getElementById('userinput').focus();">
<form>
<input id="userinput" onfocus="var val=this.value; this.value=''; this.value= val;"
         class=large type="text" size="10" maxlength="50" value="beans" name="myinput">
</form>
</body>

el.setSelectionRange(-1, -1);

https://codesandbox.io/s/peaceful-bash-x2mti

Этот метод обновляет свойства HTMLInputElement.selectionStart, selectionEnd и selectionDirection за один вызов.

https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/setSelectionRange

В других методах js -1обычно означает (до) последний символ. Это касается и этого, но я не смог найти явного упоминания об этом поведении в документации.

Для всех браузеров на все случаи:

function moveCursorToEnd(el) {
    window.setTimeout(function () {
            if (typeof el.selectionStart == "number") {
            el.selectionStart = el.selectionEnd = el.value.length;
        } else if (typeof el.createTextRange != "undefined") {
            var range = el.createTextRange();
            range.collapse(false);
            range.select();
        }
    }, 1);
}

Требуется тайм-аут, если вам нужно переместить курсор из обработчика события onFocus

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

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

В jQuery это

$(document).ready(function () {
  $('input').focus(function () {
    $(this).attr('value',$(this).attr('value'));
  }
}

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

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

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)">

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

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

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

Принимая некоторые ответы ... делая JQuery в одну строку.

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

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

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

Кажется, это работает во всех браузерах.

Хотя это может быть старый вопрос с множеством ответов, я столкнулся с подобной проблемой, и ни один из ответов не был тем, что я хотел, и / или был плохо объяснен. Проблема со свойствами 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 (), фокус будет добавлен в начало элемента ввода (что здесь является основной проблемой), игнорируя тот факт, что элемент ввода уже имеет значение в нем. Однако при изменении значения ввода курсор автоматически помещается в конец значения внутри элемента ввода. Поэтому, если вы переопределите значение тем же значением, которое было ранее введено во ввод, значение будет выглядеть нетронутым, однако курсор переместится в конец.

Попробуйте это работает с Vanilla JavaScript.

<input type="text" id="yourId" onfocus=" let value = this.value; this.value = null; this.value=value" name="nameYouWant" class="yourClass" value="yourValue" placeholder="yourPlaceholder...">

В Js

document.getElementById("yourId").focus()

Установите курсор при нажатии на текстовую область до конца текста ... Вариация этого кода ... ТАКЖЕ работает! для Firefox, IE, Safari, Chrome.

В серверном коде:

txtAddNoteMessage.Attributes.Add("onClick", "sendCursorToEnd('" & txtAddNoteMessage.ClientID & "');")

В Javascript:

function sendCursorToEnd(obj) {
    var value =  $(obj).val(); //store the value of the element
    var message = "";
    if (value != "") {
        message = value + "\n";
     };
    $(obj).focus().val(message);
    $(obj).unbind();
 }

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

$("#search-button").click(function (event) {
    event.preventDefault();
    $('#textbox').val('this');
    $("#textbox").focus();
    return false;
});

Вот скрипка для тестирования https://jsfiddle.net/5on50caf/1/

Я хотел поместить курсор в конец элемента "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

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

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. На мобильных устройствах я не пробовал это.

Проверьте это решение!

//fn setCurPosition
$.fn.setCurPosition = function(pos) {
    this.focus();
    this.each(function(index, elem) {
        if (elem.setSelectionRange) {
            elem.setSelectionRange(pos, pos);
        } else if (elem.createTextRange) {
            var range = elem.createTextRange();
            range.collapse(true);
            range.moveEnd('character', pos);
            range.moveStart('character', pos);
            range.select();
        }
    });
    return this;
};

// USAGE - Set Cursor ends
$('#str1').setCurPosition($('#str1').val().length);

// USAGE - Set Cursor at 7 position
// $('#str2').setCurPosition(7);

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<p>Set cursor at any position</p>
<p><input type="text" id="str1" value="my string here" /></p>
<p><input type="text" id="str2" value="my string here" /></p>

Супер просто (возможно, вам придется сосредоточиться на элементе ввода)

inputEl = getElementById('inputId');
var temp = inputEl.value;
inputEl.value = '';
inputEl.value = temp;

Я пробовал эти предложения раньше, но никто не работал для меня (проверил их в Chrome), поэтому я написал свой собственный код - и он отлично работает в Firefox, IE, Safari, Chrome ...

В текстовой области:

onfocus() = sendCursorToEnd(this);

В Javascript:

function sendCursorToEnd(obj) { 
var value = obj.value; //store the value of the element
var message = "";
if (value != "") {
    message = value + "\n";
};
$(obj).focus().val(message);}

Вот демоверсия jsFiddle моего ответа. Демонстрация использует CoffeeScript, но вы можете преобразовать его в простой JavaScript, если вам нужно.

Важная часть в JavaScript:

var endIndex = textField.value.length;
if (textField.setSelectionRange) {
   textField.setSelectionRange(endIndex, endIndex);
}

Я публикую этот ответ, потому что я уже написал его для кого-то, у кого был такой же вопрос. Этот ответ охватывает не так много крайних случаев, как основные ответы здесь, но он работает для меня и имеет демоверсию jsFiddle, с которой можно поиграть.

Вот код из jsFiddle, поэтому этот ответ сохраняется, даже если jsFiddle исчезает:

moveCursorToEnd = (textField) ->
  endIndex = textField.value.length
  if textField.setSelectionRange
    textField.setSelectionRange(endIndex, endIndex)

jQuery ->
  $('.that-field').on 'click', ->
    moveCursorToEnd(this)

<div class="field">
    <label for="pressure">Blood pressure</label>:
    <input class="that-field" type="text" name="pressure" id="pressure" value="24">
</div>
<p>
    Try clicking in the text field. The cursor will always jump to the end.
</p>

body {
    margin: 1em;
}

.field {
    margin-bottom: 1em;
}

Попробуйте следующий код:

$('input').focus(function () {
    $(this).val($(this).val());
}).focus()

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

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

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();
    }
}