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

Question

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

Answer 1

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

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

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

Answer 2

Я пробовал эти предложения раньше, но никто не работал для меня (проверил их в 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);}

Answer 3

Установить курсор при нажатии на текстовую область до конца текста ... Вариация этого кода ... ТАКЖЕ работает! для 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();
 }

Answer 4

input = $('input'); 
input.focus().val(input.val()+'.'); 
if (input.val()) {input.attr('value', input.val().substr(0,input.val().length-1));}

Answer 5

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

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

Answer 6

Ну, я просто использую:

$("#myElement").val($("#myElement").val());

Answer 7

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

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

Answer 8

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

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

Answer 9

Вот демоверсия 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;
}