Gunakan JavaScript untuk menempatkan kursor di akhir teks dalam elemen input teks

Apa cara terbaik (dan saya anggap cara paling sederhana) untuk menempatkan kursor di akhir teks dalam elemen teks input melalui JavaScript - setelah fokus ditetapkan ke elemen?

Saya menghadapi masalah yang sama (setelah mengatur fokus melalui RJS / prototipe) di IE. Firefox sudah meninggalkan kursor di bagian akhir ketika sudah ada nilai untuk bidang tersebut. IE sedang memaksa kursor ke awal teks.

Solusi yang saya dapatkan adalah sebagai berikut:

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

Ini bekerja di IE7 dan FF3

Ada cara sederhana untuk membuatnya berfungsi di sebagian besar browser.

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

Namun, karena * kebiasaan beberapa browser, jawaban yang lebih inklusif terlihat lebih seperti ini

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

Menggunakan jQuery (untuk mengatur pendengar, tetapi tidak perlu sebaliknya)

$('#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'>

Menggunakan Vanilla JS (meminjam addEventfungsi dari jawaban ini )

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

Quirks

Chrome memiliki kekhasan aneh di mana acara fokus diaktifkan sebelum kursor dipindahkan ke lapangan; yang mengacaukan solusi sederhana saya. Dua opsi untuk memperbaikinya:

1. Anda dapat menambahkan waktu tunggu 0 ms (untuk menunda operasi hingga tumpukan bersih )
2. Anda dapat mengubah acara dari focusmenjadi mouseup. Ini akan sangat mengganggu bagi pengguna kecuali Anda tetap fokus. Saya tidak benar-benar menyukai salah satu dari opsi ini.

Selain itu, @vladkras menunjukkan bahwa beberapa versi Opera yang lebih lama salah menghitung panjangnya ketika ada spasi. Untuk ini, Anda dapat menggunakan angka besar yang harus lebih besar dari string Anda.

Coba ini, ini berhasil untuk saya:

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

Untuk kursor yang akan digerakkan ke ujung, masukan harus memiliki fokus terlebih dahulu, kemudian ketika nilai diubah akan menuju ke ujung. Jika Anda menyetel .value menjadi sama, ini tidak akan berubah di chrome.

Setelah sedikit meretas ini, saya menemukan cara terbaik adalah menggunakan setSelectionRangefungsi tersebut jika browser mendukungnya; jika tidak, kembalilah menggunakan metode dalam jawaban Mike Berrow (yaitu, ganti nilainya dengan dirinya sendiri).

Saya juga menyetel scrollTopke nilai tinggi jika kita berada dalam scrollable vertikal textarea. (Menggunakan nilai tinggi yang sewenang-wenang tampaknya lebih dapat diandalkan daripada $(this).height()di Firefox dan Chrome.)

Saya telah membuatnya sebagai plugin jQuery. (Jika Anda tidak menggunakan jQuery, saya percaya Anda masih bisa mendapatkan intinya dengan cukup mudah.)

Saya telah menguji di IE6, IE7, IE8, Firefox 3.5.5, Google Chrome 3.0, Safari 4.0.4, Opera 10.00.

Ini tersedia di jquery.com sebagai plugin PutCursorAtEnd . Demi kenyamanan Anda, kode untuk rilis 1.0 adalah sebagai berikut:

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

Fungsi ini berfungsi untuk saya di IE9, Firefox 6.x, dan Opera 11.x

Saya telah mencoba yang berikut ini dengan cukup sukses di chrome

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

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

Ikhtisar cepat:

Ini mengambil setiap bidang masukan dengan fokus kelas di atasnya, lalu menyimpan nilai lama bidang masukan dalam variabel, setelah itu menerapkan string kosong ke bidang masukan.

Kemudian menunggu 1 milidetik dan memasukkan nilai lama lagi.

Ini tahun 2019 dan tidak ada metode di atas yang berhasil untuk saya, tetapi yang ini berhasil, diambil dari 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>

Sederhana. Saat mengedit atau mengubah nilai, pertama-tama taruh fokus lalu tetapkan nilainya.

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

Masih diperlukan variabel perantara, (lihat var val =) jika tidak kursor berperilaku aneh, kita membutuhkannya di akhir.

<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

Metode ini memperbarui properti HTMLInputElement.selectionStart, selectionEnd, dan selectionDirection dalam satu panggilan.

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

Dalam metode js lain -1biasanya berarti (ke) karakter terakhir. Ini juga kasus yang satu ini, tetapi saya tidak dapat menemukan penyebutan eksplisit tentang perilaku ini di dokumen.

Untuk semua browser untuk semua kasus:

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

Waktu tunggu diperlukan jika Anda perlu memindahkan kursor dari pengendali kejadian onFocus

Saya sangat menyukai jawaban yang diterima, tetapi berhenti berfungsi di Chrome. Di Chrome, agar kursor berada di ujung, nilai masukan perlu diubah. Solusinya adalah sebagai berikut:

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

Coba yang ini bekerja dengan 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...">

Di Js

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

Di jQuery, itu

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

Masalah ini menarik. Hal yang paling membingungkan tentang itu adalah bahwa tidak ada solusi yang saya temukan dapat memecahkan masalah sepenuhnya.

+++++++ SOLUSI +++++++

1. Anda membutuhkan fungsi JS, seperti ini:

   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. Anda perlu memanggil orang ini dalam acara onfocus dan onclick.

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

ITU BEKERJA DI SEMUA PERANGKAT, BROWSERS !!!!

Saya baru saja menemukan bahwa di iOS, textarea.textContentproperti pengaturan akan menempatkan kursor di akhir teks di elemen textarea setiap saat. Perilaku tersebut adalah bug di aplikasi saya, tetapi tampaknya menjadi sesuatu yang dapat Anda gunakan dengan sengaja.

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

Mengambil beberapa jawaban .. membuat jquery satu baris.

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

Jika kolom input hanya membutuhkan nilai default statis, saya biasanya melakukan ini dengan jQuery:

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

Sepertinya ini berfungsi di semua browser.

Meskipun ini mungkin pertanyaan lama dengan banyak jawaban, saya menemukan masalah serupa dan tidak ada jawaban yang sesuai dengan keinginan saya dan / atau penjelasannya buruk. Masalah dengan properti selectionStart dan selectionEnd adalah properti tersebut tidak ada untuk nomor jenis masukan (sementara pertanyaan ditanyakan untuk jenis teks, saya rasa ini mungkin membantu orang lain yang mungkin memiliki jenis masukan lain yang perlu mereka fokuskan). Jadi, jika Anda tidak tahu apakah tipe input yang akan difokuskan oleh fungsi adalah tipe angka atau bukan, Anda tidak dapat menggunakan solusi itu.

Solusi yang berfungsi lintas browser dan untuk semua jenis input cukup sederhana:

• dapatkan dan simpan nilai input dalam variabel
• fokuskan masukan
• atur nilai input ke nilai yang disimpan

Dengan cara itu kursor berada di akhir elemen masukan.
Jadi yang akan Anda lakukan adalah sesuatu seperti ini (menggunakan jquery, asalkan pemilih elemen yang ingin difokuskan dapat diakses melalui atribut data 'data-focus-element' dari elemen yang diklik dan fungsi dijalankan setelah mengklik '.foo' elemen):

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

Mengapa ini berhasil? Sederhananya, ketika .focus () dipanggil, fokus akan ditambahkan ke awal elemen input (yang merupakan masalah inti di sini), mengabaikan fakta, bahwa elemen input sudah memiliki nilai di dalamnya. Namun, ketika nilai input berubah, kursor secara otomatis ditempatkan di akhir nilai di dalam elemen input. Jadi jika Anda mengganti nilai dengan nilai yang sama yang telah dimasukkan sebelumnya pada input, nilai akan terlihat tidak tersentuh, namun kursor akan berpindah ke akhir.

Setel kursor saat mengklik area teks ke akhir teks ... Variasi kode ini ... JUGA berfungsi! untuk Firefox, IE, Safari, Chrome ..

Dalam kode sisi server:

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

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

Jika Anda menyetel nilainya terlebih dahulu, lalu menyetel fokus, kursor akan selalu muncul di bagian akhir.

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

Ini biola untuk diuji https://jsfiddle.net/5on50caf/1/

Saya ingin meletakkan kursor di akhir elemen "div" di mana contenteditable = true, dan saya mendapat solusi dengan kode 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>

Dan fungsi ini melakukan keajaiban:

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

Berfungsi dengan baik untuk sebagian besar browser, harap periksa, kode ini meletakkan teks dan meletakkan fokus di akhir teks dalam elemen div (bukan elemen input)

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

Terima kasih, Xeoncross

Saya juga menghadapi masalah yang sama. Akhirnya ini akan berhasil untuk saya:

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;

  });

};

Beginilah cara kita menyebutnya:

var searchInput = $("#searchInputOrTextarea");

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

Ini berfungsi untuk saya di safari, IE, Chrome, Mozilla. Di perangkat seluler saya tidak mencoba ini.

Periksa solusi ini!

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

Sangat mudah (Anda mungkin harus fokus pada elemen masukan)

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

Saya mencoba saran sebelumnya tetapi tidak ada yang berhasil untuk saya (mengujinya di Chrome), jadi saya menulis kode saya sendiri - dan berfungsi dengan baik di Firefox, IE, Safari, Chrome ...

Di Textarea:

onfocus() = sendCursorToEnd(this);

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

Berikut demo jsFiddle jawaban saya. Demo menggunakan CoffeeScript, tetapi Anda dapat mengonversinya menjadi JavaScript biasa jika perlu.

Bagian penting, di JavaScript:

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

Saya memposting jawaban ini karena saya sudah menulisnya untuk orang lain yang memiliki pertanyaan yang sama. Jawaban ini tidak mencakup kasus tepi sebanyak jawaban teratas di sini, tetapi berfungsi untuk saya, dan memiliki demo jsFiddle yang dapat Anda mainkan.

Berikut adalah kode dari jsFiddle, jadi jawaban ini akan disimpan meskipun jsFiddle menghilang:

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

Coba kode berikut:

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

Meskipun saya terlambat menjawab, tetapi untuk pertanyaan selanjutnya, ini akan sangat membantu. Dan itu juga bekerja di contenteditablediv.

Dari mana Anda perlu menetapkan fokus pada akhirnya; tulis kode ini-

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

Dan fungsinya adalah -

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