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

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

J'utilise jQuery pour implémenter l'historique des commandes lorsque l'utilisateur frappe les flèches haut / bas. Lorsque la flèche vers le haut est frappée, je remplace la valeur d'entrée par la commande précédente et je mets le focus sur le champ d'entrée, mais je veux que le curseur soit toujours positionné à la fin de la chaîne d'entrée.

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 à être placé à la fin de «entrée» après la mise au point?

On dirait que la valeur est effacée après la mise au point, puis la réinitialisation fonctionne.

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

Cela semble un peu étrange, voire idiot, mais cela fonctionne pour moi:

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

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

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

J'espère que cela vous aidera:

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

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 s'il est pris en charge, sinon il a un repli 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;
  });
};

Ensuite, vous pouvez simplement faire:

input.putCursorAtEnd();

Qu'en est-il en une seule ligne ...

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

Cette ligne fonctionne pour moi.

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

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

Ajout: si l' élément d' entrée a été ajouté au DOM à l'aide de JQuery, un focus n'est pas défini dans IE. J'ai utilisé un petit truc:

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

Ref: @ will824 Comment, Cette solution a fonctionné pour moi sans problème de compatibilité. Le reste des solutions a échoué dans IE9.

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

Testé et trouvé fonctionnant dans:

Firefox 33
Chrome 34
Safari 5.1.7
IE 9

Je sais que cette réponse arrive tard, mais je peux voir que les gens n'ont pas trouvé de réponse. Pour éviter que la touche haut ne place le curseur au début, juste à return falsepartir de la méthode gérant l'événement. Cela arrête la chaîne d'événements qui conduit au mouvement du curseur. Coller le code révisé de l'OP ci-dessous:

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

J'utilise le code ci-dessous et cela fonctionne bien

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

Ce sera différent pour différents navigateurs:

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

Plus de détails sont dans ces articles ici sur SitePoint , AspAlliance .

comme d'autres l'ont dit, clear and fill a fonctionné pour moi:

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

définissez d'abord la valeur. puis réglez la mise au point. quand il se concentre, il utilisera la valeur qui existe au moment du focus, donc votre valeur doit être définie en premier.

cette logique fonctionne pour moi avec une application qui remplit un <input>avec la valeur d'un clic <button>. val()est réglé en premier. puisfocus()

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

J'ai trouvé la même chose que suggérée ci-dessus par quelques personnes. Si vous focus()appuyez d'abord sur le val()dans l'entrée, le curseur se positionnera à la fin de la valeur d'entrée dans Firefox, Chrome et IE. Si vous poussez d'abord le val()dans le champ de saisie, Firefox et Chrome positionnent le curseur à la fin, mais IE le positionne à l'avant lorsque vous focus().

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

devrait faire l'affaire (il a toujours pour moi de toute façon).

Au début, vous devez définir le focus sur l'objet de zone de texte sélectionné et ensuite vous définissez la valeur.

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

fonctionne pour tous les navigateurs ie ..

En voici un autre, un one liner qui ne réaffecte pas la valeur:

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

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

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

window.onload = pageLoad;

La réponse de scorpion9 fonctionne. Juste pour être plus clair, voir mon code ci-dessous,

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

Il se concentrera avec le point de la souris

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