Atur fokus mouse dan gerakkan kursor ke akhir input menggunakan jQuery

Pertanyaan ini telah ditanyakan dalam beberapa format berbeda tetapi saya tidak bisa mendapatkan jawaban apa pun untuk berfungsi dalam skenario saya.

Saya menggunakan jQuery untuk mengimplementasikan riwayat perintah saat pengguna menekan panah atas / bawah. Ketika panah atas dipukul, saya mengganti nilai input dengan perintah sebelumnya dan mengatur fokus pada bidang input, tetapi ingin kursor selalu diposisikan di akhir string input.

Kode saya, seperti:

$(document).keydown(function(e) {
  var key   = e.charCode ? e.charCode : e.keyCode ? e.keyCode : 0;
  var input = self.shell.find('input.current:last');

  switch(key) {
    case 38: // up
      lastQuery = self.queries[self.historyCounter-1];
      self.historyCounter--;
      input.val(lastQuery).focus();
// and it continues on from there

Bagaimana cara memaksa kursor untuk ditempatkan di akhir 'masukan' setelah fokus?

Sepertinya menghapus nilai setelah pemfokusan dan kemudian mengatur ulang berfungsi.

input.focus();
var tmpStr = input.val();
input.val('');
input.val(tmpStr);

Ini terlihat agak aneh, bahkan konyol, tetapi ini berhasil untuk saya:

input.val(lastQuery);
input.focus().val(input.val());

Sekarang, saya tidak yakin saya telah mereplikasi penyiapan Anda. Saya berasumsi inputadalah<input> elemen.

Dengan mengatur ulang nilainya (ke dirinya sendiri), saya pikir kursor diletakkan di akhir input. Diuji di Firefox 3 dan MSIE7.

Semoga ini membantu Anda:

var fieldInput = $('#fieldName');
var fldLength= fieldInput.val().length;
fieldInput.focus();
fieldInput[0].setSelectionRange(fldLength, fldLength);

Chris Coyier memiliki plugin jQuery mini untuk ini yang berfungsi dengan baik: http://css-tricks.com/snippets/jquery/move-cursor-to-end-of-textarea-or-input/

Ini menggunakan setSelectionRange jika didukung, yang lain memiliki fallback yang solid.

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

Kemudian Anda bisa melakukan:

input.putCursorAtEnd();

Bagaimana dengan satu baris ...

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

Baris ini cocok untuk saya.

Jawaban 2 artlung : Ini bekerja dengan baris kedua hanya di kode saya (IE7, IE8; Jquery v1.6):

var input = $('#some_elem');
input.focus().val(input.val());

Tambahan: jika elemen input ditambahkan ke DOM menggunakan JQuery, fokus tidak disetel di IE. Saya menggunakan sedikit trik:

input.blur().focus().val(input.val());

Ref: @ will824 Comment, Solusi ini bekerja untuk saya tanpa masalah kompatibilitas. Solusi lainnya gagal di IE9.

var input = $("#inputID");
var tmp = input.val();
input.focus().val("").blur().focus().val(tmp);

Diuji dan ditemukan bekerja di:

Firefox 33
Chrome 34
Safari 5.1.7
IE 9

Saya tahu jawaban ini datang terlambat, tetapi saya dapat melihat orang-orang belum menemukan jawaban. Untuk mencegah tombol atas meletakkan kursor di awal, hanya return falsedari metode yang menangani peristiwa tersebut. Ini menghentikan rangkaian peristiwa yang mengarah ke gerakan kursor. Menempelkan kode yang direvisi dari OP di bawah ini:

$(document).keydown(function(e) {
  var key   = e.charCode ? e.charCode : e.keyCode ? e.keyCode : 0;
  var input = self.shell.find('input.current:last');

  switch(key) {
    case 38: // up
      lastQuery = self.queries[self.historyCounter-1];
      self.historyCounter--;
      input.val(lastQuery).focus();
      // HERE IS THE FIX:
      return false; 
// and it continues on from there

Saya menggunakan kode di bawah ini dan berfungsi dengan baik

function to_end(el) {
            var len = el.value.length || 0;
            if (len) {
                if ('setSelectionRange' in el) el.setSelectionRange(len, len);
                else if ('createTextRange' in el) {// for IE
                    var range = el.createTextRange();
                    range.moveStart('character', len);
                    range.select();
                }
            }
        }

Ini akan berbeda untuk browser yang berbeda:

Ini bekerja di ff:

    var t =$("#INPUT");
    var l=$("#INPUT").val().length;
    $(t).focus();

    var r = $("#INPUT").get(0).createTextRange();
    r.moveStart("character", l); 
    r.moveEnd("character", l);      
    r.select();

Rincian lebih lanjut ada di artikel ini di sini di SitePoint , AspAlliance .

seperti yang dikatakan orang lain, jelas dan isi berhasil untuk saya:

    var elem = $('#input_field');
    var val = elem.val();
    elem.focus().val('').val(val);

atur nilainya terlebih dahulu. lalu atur fokus. ketika fokus maka akan menggunakan nilai yang ada pada saat fokus, jadi nilai anda harus di tentukan dulu.

logika ini berfungsi untuk saya dengan aplikasi yang mengisi <input>dengan nilai yang diklik <button>. val()diatur lebih dulu. kemudianfocus()

$('button').on('click','',function(){
    var value = $(this).attr('value');
    $('input[name=item1]').val(value);
    $('input[name=item1]').focus();
});

Saya telah menemukan hal yang sama seperti yang disarankan di atas oleh beberapa orang. Jika Anda focus()pertama kali, lalu mendorong val()ke dalam masukan, kursor akan diposisikan ke akhir nilai masukan di Firefox, Chrome dan IE. Jika Anda mendorong val()ke dalam bidang masukan terlebih dahulu, Firefox dan Chrome memposisikan kursor di ujung, tetapi IE memposisikannya ke depan saat Anda focus().

$('element_identifier').focus().val('some_value') 

harus melakukan trik (toh selalu ada untuk saya).

Pada awalnya Anda harus mengatur fokus pada objek kotak teks yang dipilih dan selanjutnya Anda mengatur nilainya.

$('#inputID').focus();
$('#inputID').val('someValue')

    function focusCampo(id){
        var inputField = document.getElementById(id);
        if (inputField != null && inputField.value.length != 0){
            if (inputField.createTextRange){
                var FieldRange = inputField.createTextRange();
                FieldRange.moveStart('character',inputField.value.length);
                FieldRange.collapse();
                FieldRange.select();
            }else if (inputField.selectionStart || inputField.selectionStart == '0') {
                var elemLen = inputField.value.length;
                inputField.selectionStart = elemLen;
                inputField.selectionEnd = elemLen;
                inputField.focus();
            }
        }else{
            inputField.focus();
        }
    }

$('#urlCompany').focus(focusCampo('urlCompany'));

bekerja untuk semua browser yaitu ..

Ini satu lagi, satu liner yang tidak menetapkan ulang nilainya:

$("#inp").focus()[0].setSelectionRange(99999, 99999);

function CurFocus()
{
    $('.txtEmail').focus(); 
}

function pageLoad()
{
   setTimeout(CurFocus(),3000);
}

window.onload = pageLoad;

Jawaban dari scorpion9 berhasil. Supaya lebih jelas lihat kode saya di bawah ini,

<script src="~/js/jquery.js"></script> 
<script type="text/javascript">
    $(function () {
        var input = $("#SomeId");
        input.focus();
        var tmpStr = input.val();
        input.val('');
        input.val(tmpStr);
    });
</script>

Ini akan fokus dengan titik mouse

$ ("# TextBox"). Focus ();