Використовуйте JavaScript, щоб розмістити курсор в кінці тексту в елементі введення тексту

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

Я зіткнувся з цим самим питанням (після встановлення фокусу через RJS / прототип) в 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, воно не зміниться в хромі.

Трохи зламавши це, я знайшов найкращим способом використання 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

Я спробував наступне з досить великим успіхом у хромі

$("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 (), фокус буде доданий до початку вхідного елемента (що тут є основною проблемою), ігноруючи той факт, що вхідний елемент вже має в ньому значення. Однак, коли значення вводу змінюється, курсор автоматично розміщується в кінці значення всередині вхідного елемента. Отже, якщо ви заміните значення з тим самим значенням, яке було раніше введено у вхід, значення буде виглядати недоторканим, проте курсор переміститься до кінця.

Спробуйте це працює з ванільним 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...">

У Дж

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 (не елемент введення)

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 ...

У Textarea:

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

Хоча я відповідаю занадто пізно, але для майбутнього запиту це буде корисно. І це також працює вcontenteditable діві.

Звідки потрібно встановити фокус у кінці; написати цей код-

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