web-dev-qa-db-fra.com

Définir le focus après le dernier caractère dans la zone de texte

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 à une autre. Lorsque l'utilisateur appuie sur retour arrière, je peux déplacer le focus sur la zone de texte précédente. Le problème est que dans IE, le focus est défini au début de la zone de texte. Voici mon code, qui fonctionne très bien en 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 est-ce que je fais la mise au point à la fin du contenu lorsque je retourne en arrière?

jqueryfocus
62
Josh

C'est le moyen facile de le faire. Si vous revenez en arrière, ajoutez simplement $("#Prefix").val($("#Prefix").val()); après avoir défini la mise au point.

C'est la manière 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()
91
ChrisG

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

Je l'ai transformé en un 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();
51
Gavin G

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

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

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

Vous devriez coder comme ça.

var num = $('#Number').val();        
$('#Number').focus().val('').val(num);
19
Arjun

Code pour n'importe quel 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();
    }
}
18
Guilherme

vous pouvez définir le pointeur sur la dernière position de la zone de texte comme suit.

temp=$("#txtName").val();
$("#txtName").val('');
$("#txtName").val(temp);
$("#txtName").focus();
9
Dens

On peut utiliser ces javascript simples dans la balise input.

<input type="text" name="your_name" value="your_value"
     onfocus="this.setSelectionRange(this.value.length, this.value.length);" 
autofocus />
1
Santosh Satapathy
var val =$("#inputname").val();
$("#inputname").removeAttr('value').attr('value', val).focus();
// I think this is beter for all browsers...
1
mangas
<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>
0
Rajkumar

Cela peut aider, assurez-vous de rogner votre valeur d'entrée (supprimer les espaces) côté client et côté serveur lors de l'extraction de la valeur.

$("#your-Selector").focus().val(' 1');

0
csandreas1