Imposta il focus del mouse e sposta il cursore alla fine dell'input usando jQuery

Questa domanda è stata posta in diversi formati ma non riesco a far funzionare nessuna delle risposte nel mio scenario.

Sto usando jQuery per implementare la cronologia dei comandi quando l'utente preme le frecce su / giù. Quando si preme la freccia su, sostituisco il valore di input con il comando precedente e metto il focus sul campo di input, ma voglio che il cursore sia sempre posizionato alla fine della stringa di input.

Il mio codice, così com'è:

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

Come posso forzare il posizionamento del cursore alla fine di "input" dopo il focus?

Sembra che la cancellazione del valore dopo la messa a fuoco e il ripristino funzionino.

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

Sembra un po 'strano, persino sciocco, ma per me funziona:

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

Ora, non sono sicuro di aver replicato la tua configurazione. Suppongo inputsia un <input>elemento.

Reimpostando il valore (su se stesso) penso che il cursore venga posizionato alla fine dell'input. Testato in Firefox 3 e MSIE7.

Spero che questo ti aiuti:

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

Chris Coyier ha un mini plugin jQuery per questo che funziona perfettamente: http://css-tricks.com/snippets/jquery/move-cursor-to-end-of-textarea-or-input/

Usa setSelectionRange se supportato, altrimenti ha un solido fallback.

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

Quindi puoi semplicemente fare:

input.putCursorAtEnd();

Che ne dici in una sola riga ...

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

Questa linea funziona per me.

2 risposta di artlung : Funziona con la seconda riga solo nel mio codice (IE7, IE8; Jquery v1.6):

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

Aggiunta: se l' elemento di input è stato aggiunto a DOM utilizzando JQuery, un focus non è impostato in IE. Ho usato un piccolo trucco:

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

Rif: @ will824 Commento, questa soluzione ha funzionato per me senza problemi di compatibilità. Il resto delle soluzioni non sono riuscite in IE9.

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

Testato e trovato funzionante in:

Firefox 33
Chrome 34
Safari 5.1.7
IE 9

So che questa risposta arriva tardi, ma posso vedere che le persone non hanno trovato una risposta. Per evitare che il tasto su posizioni il cursore all'inizio, solo return falsedal metodo che gestisce l'evento. Ciò interrompe la catena di eventi che porta al movimento del cursore. Incollare il codice rivisto dall'OP di seguito:

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

Uso il codice qui sotto e funziona bene

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

Sarà diverso per i diversi browser:

Funziona in 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();

Maggiori dettagli sono in questi articoli qui su SitePoint , AspAlliance .

come altri hanno detto, clear and fill ha funzionato per me:

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

impostare prima il valore. quindi impostare la messa a fuoco. quando si concentra, utilizzerà il valore esistente al momento del focus, quindi il tuo valore deve essere impostato per primo.

questa logica funziona per me con un'applicazione che popola un <input>con il valore di un cliccato <button>. val()è impostato per primo. poifocus()

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

Ho trovato la stessa cosa suggerita sopra da alcune persone. Se focus()prima premi il val()tasto nell'input, il cursore verrà posizionato alla fine del valore di input in Firefox, Chrome e IE. Se si preme prima il val()nel campo di input, Firefox e Chrome posizionano il cursore alla fine, ma IE lo posiziona in primo piano quando si focus().

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

dovrebbe fare il trucco (ha sempre per me comunque).

All'inizio devi mettere il fuoco sull'oggetto casella di testo selezionato e successivamente impostare il valore.

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

funziona per tutti i browser, ad esempio ..

Eccone un altro, un one liner che non riassegna il valore:

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

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

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

window.onload = pageLoad;

La risposta di scorpion9 funziona. Solo per renderlo più chiaro vedi il mio codice qui sotto,

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

Si concentrerà con il punto del mouse

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