web-dev-qa-db-fra.com

Comment définir la position du curseur à la fin du texte saisi dans Google Chrome

J'essaie de placer le curseur dans un champ de texte avec une fonction de mise au point. J'ai fait quelques recherches, mais aucune des solutions fournies ne semblait fonctionner dans Google Chrome. Dans Internet Explorer et Firefox, cette solution fonctionne bien:

Les js:

$('#Search').focus(function() {
  var SearchInput = $('#Search');
  var strLength= SearchInput.val().length;
  SearchInput.focus();
  SearchInput[0].setSelectionRange(strLength, strLength);
});

Le HTML:

<input type="text" id="Search" value="Hello World" />

Voici le lien vers mon jsfiddle .

Existe-t-il un moyen de faire fonctionner cela dans Google Chrome aussi?

javascriptjqueryhtmlgoogle-chrome
19
Guilherme Vaz

Il semble que l'événement focus soit déclenché avant que le curseur ne soit placé lorsque vous concentrez une entrée, une solution de contournement hacky serait d'utiliser un setTimeout comme ceci:

$('#Search').focus(function() {
    setTimeout((function(el) {
        var strLength = el.value.length;
        return function() {
            if(el.setSelectionRange !== undefined) {
                el.setSelectionRange(strLength, strLength);
            } else {
                $(el).val(el.value);
            }
    }}(this)), 0);
});

Essayez ce violon: http://jsfiddle.net/esnvh/26/

Modifié à 0 ms, comme @SparK l'a souligné, cela suffit pour pousser jusqu'à la fin de la file d'attente d'exécution.

19
ruuska

Code mis à jour

Référence: http://css-tricks.com/snippets/jquery/move-cursor-to-end-of-textarea-or-input/

setSelectionRangen'est pas pris en charge sur IE, Opera & Safari

Je vous suggère de faire quelque chose comme ça (fonctionne sur IE, Chrome, Safari, Firefox).

$('#Search').on('mouseup', function() {
    var element = $(this)[0];
    if (this.setSelectionRange) {
        var len = $(this).val().length * 2;
        element.setSelectionRange(len, len);
    }
    else {
        $(this).val($(this).val());
        $(this).focus();
    }
    element.scrollTop = 9999;
});

Essayez ceci: http://jsfiddle.net/r5UVW/4/

6
Paul Rad

Utilisez l'événement mouseup pour cela:

$("#Search").mouseup(function () {
    this.setSelectionRange(this.value.length, this.value.length);    
});
4
Anoop Joshi

Pour info, actuellement, la saisie de nombre ne prend pas en charge setSelectionRange(), donc une solution rapide consiste simplement à sélectionner le texte à l'aide de .select(). Sur les navigateurs de bureau, cela met en surbrillance le texte, sur les mobiles, cela déplace le curseur directement à la fin du texte.

1
DanV