Mettre le focus après le dernier caractère de la zone de texte

Question

Mettre le focus après le dernier caractère de la zone de texte

Demandé el 5 de Janvier, 2011: Quand la question a-t-elle été
32201 affichage: Nombre de visites la question a
5 Réponses: Nombre de réponses aux questions
Résolu: Situation réelle de la question

J'ai 3 zones de texte pour un numéro de téléphone. Lorsque l'utilisateur tape, il passe automatiquement d'une zone de texte à la suivante. Lorsque l'utilisateur appuie sur la touche d'effacement, je peux déplacer le focus sur la zone de texte précédente. Le problème est que dans IE, le focus est placé au début de la zone de texte. Voici mon code, qui fonctionne bien dans Chrome.

$('#AreaCode').live('keyup', function (event) {
    if ($(this).val().length == $(this).attr("maxlength"))
        $('#Prefix').focus();
});

$('#Prefix').live('keyup', function (event) {
    if (event.keyCode == 8 && $(this).val().length == 0)
        $('#AreaCode').focus();

    if ($(this).val().length == $(this).attr("maxlength"))
        $('#Number').focus();
});

$('#Number').live('keyup', function (event) {
    if (event.keyCode == 8 && $(this).val().length == 0)
        $('#Prefix').focus();
});

Comment faire pour que la mise au point se fasse à la fin du contenu lorsque l'on revient en arrière ?

Demandé el 5 de Janvier, 2011 par Josh

1 votes

Duplicata de stackoverflow.com/questions/511088/

Commenté el 5 de Janvier, 2011 par Alex Vidal

0 votes

Une autre méthode simple ici : stackoverflow.com/a/19568146/1032372

Commenté el 25 de Novembre, 2014 par shim

Answer 1

5 Réponses

Answer 2

97voto

ChrisG Points 430

C'est le moyen le plus simple de le faire. Si vous allez en arrière, ajoutez simplement $("#Prefix").val($("#Prefix").val()); après avoir réglé la mise au point

C'est la méthode la plus appropriée (plus propre) :

function SetCaretAtEnd(elem) {
        var elemLen = elem.value.length;
        // For IE Only
        if (document.selection) {
            // Set focus
            elem.focus();
            // Use IE Ranges
            var oSel = document.selection.createRange();
            // Reset position to 0 & then set at end
            oSel.moveStart('character', -elemLen);
            oSel.moveStart('character', elemLen);
            oSel.moveEnd('character', 0);
            oSel.select();
        }
        else if (elem.selectionStart || elem.selectionStart == '0') {
            // Firefox/Chrome
            elem.selectionStart = elemLen;
            elem.selectionEnd = elemLen;
            elem.focus();
        } // if
    } // SetCaretAtEnd()

Répondu el 5 de Janvier, 2011 par ChrisG (430 Points )

0 votes

Caret et non Carat. Je l'ai aussi enveloppé dans un try..catch juste au cas où, et j'ai mis "if (elemLen == 0) { return ; }" près du début. De plus, la première ligne de votre code n'est pas formatée comme le reste. Sinon, merci pour le code :)

Commenté el 19 de Octobre, 2011 par Anthony

0 votes

Merci pour la correction de l'orthographe et du formatage. J'ai mis à jour ma réponse pour la corriger. Je suis heureux que cela ait fonctionné pour vous.

Commenté el 19 de Octobre, 2011 par ChrisG

3 votes

J'ai ajouté elem = $(elem).get(0); à la ligne 2 avant ` var elemLen = elem.value.length;`. Si l'objet est un jQuery-object, il sera converti en un javascript-object. Si c'est toujours un objet javascript, cette ligne ne fera rien car tout va bien :) Cette ligne permet d'éviter une erreur "elem.value is undefined".

Commenté el 3 de Février, 2015 par ReynekeVosz

Afficher 2 autres commentaires

Answer 3

53voto

Gavin G Points 336

J'ai essayé de nombreuses solutions différentes, la seule qui a fonctionné pour moi était basée sur la solution de Chris G sur cette page (mais avec une légère modification).

Je l'ai transformé en plugin jQuery pour une utilisation future pour tous ceux qui en ont besoin.

(function($){
    $.fn.setCursorToTextEnd = function() {
        var $initialVal = this.val();
        this.val($initialVal);
    };
})(jQuery);

exemple d'utilisation :

$('#myTextbox').setCursorToTextEnd();

Répondu el 23 de Février, 2012 par Gavin G (336 Points )

2 votes

+1 Pour en faire un plugin. N'oubliez pas d'appeler focus() sur l'élément avant d'appeler cette fonction.

Commenté el 17 de Septembre, 2012 par flu

2 votes

Cela ne semble pas fonctionner correctement dans IE, seulement FF. Dans IE, il revient au début du texte. Est-ce que quelqu'un d'autre rencontre ce problème ?

Commenté el 13 de Janvier, 2013 par Cheeky

2 votes

Pourquoi diable avoir un signe de dollar devant les variables JavaScript ? De plus, il faut les déclarer avec "var".

Commenté el 9 de Avril, 2013 par Mathias Lykkegaard Lorenzen

Afficher 4 autres commentaires

Answer 4

46voto

Devasish Points 48

Cela fonctionne bien pour moi. [Ref : le très beau plug in de Gavin G].

(function($){
    $.fn.focusTextToEnd = function(){
        this.focus();
        var $thisVal = this.val();
        this.val('').val($thisVal);
        return this;
    }
}(jQuery));

$('#mytext').focusTextToEnd();

Répondu el 8 de Juillet, 2014 par Devasish (48 Points )

2 votes

La version G de @Gavin ne fonctionnait pas pour moi, mais celle-ci fonctionne.

Commenté el 28 de Septembre, 2017 par Luis Rivera

Answer 5

21voto

Guilherme Points 79

Code pour tout navigateur :

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

Répondu el 19 de Février, 2012 par Guilherme (79 Points )

0 votes

Après avoir essayé de nombreuses réponses, cela a finalement fonctionné... :) J'utilise IE 8.

Commenté el 5 de Juin, 2015 par Diganta

Answer 6

1voto

Rajkumar Points 1

<script type="text/javascript">
    $(function(){
        $('#areaCode,#firstNum,#secNum').keyup(function(e){
            if($(this).val().length==$(this).attr('maxlength'))
                $(this).next(':input').focus()
        })
    })
    </script>

<body>

<input type="text" id="areaCode" name="areaCode" maxlength="3" value="" size="3" />- 
<input type="text" id="firstNum" name="firstNum" maxlength="3" value="" size="3" />- 
<input type="text" id="secNum" name=" secNum " maxlength="4" value="" size="4" />

</body>

Répondu el 8 de Mars, 2013 par Rajkumar (1 Points )

Mettre le focus après le dernier caractère de la zone de texte

Réponses

Questions en vedette

Top Tags

Prograide.com

Powered by:

Mettre le focus après le dernier caractère de la zone de texte

Réponses

Questions en vedette

Top Tags

Dans notre réseau

Prograide.com

Powered by: