Définir le focus de la souris et déplacer le curseur à la fin de l'entrée en utilisant jQuery

Question

Cette question a été posée dans plusieurs formats différents, mais je ne parviens à faire fonctionner aucune des réponses dans mon scénario.

J'utilise jQuery pour mettre en œuvre l'historique des commandes lorsque l'utilisateur appuie sur les flèches haut/bas. Lorsque la flèche vers le haut est activée, je remplace la valeur saisie par la commande précédente et je mets l'accent sur le champ de saisie, mais je veux que le curseur soit toujours positionné à la fin de la chaîne de saisie.

Mon code, tel quel :

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

Comment puis-je forcer le curseur à se placer à la fin de 'input' après le focus ?

Answer 1

On dirait que l'effacement de la valeur après la mise au point puis la réinitialisation fonctionne.

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

Answer 2

Ça a l'air un peu bizarre, voire stupide, mais ça marche pour moi :

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

Maintenant, je ne suis pas certain d'avoir reproduit votre installation. Je suppose que input est un <input> élément.

En réinitialisant la valeur (à elle-même), je pense que le curseur est placé à la fin de l'entrée. Testé dans Firefox 3 et MSIE7.

Answer 3

Chris Coyier a un mini plugin jQuery pour cela qui fonctionne parfaitement bien : http://css-tricks.com/snippets/jquery/move-cursor-to-end-of-textarea-or-input/

Il utilise setSelectionRange si elle est prise en charge, sinon elle a une solution de rechange solide.

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

Alors tu peux juste faire :

input.putCursorAtEnd();

Answer 4

2 artlung Réponse de l'auteur : Cela fonctionne uniquement avec la deuxième ligne dans mon code (IE7, IE8 ; Jquery v1.6) :

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

Ajout : si entrée a été ajouté au DOM en utilisant JQuery, un focus n'est pas défini dans IE. J'ai utilisé une petite astuce :

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

Answer 5

Il sera différent pour les différents navigateurs :

Cela fonctionne en 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();

Vous trouverez plus de détails dans ces articles à l'adresse suivante SitePoint , AspAlliance .