jquery - last - Establecer el foco después del último carácter en el cuadro de texto

cursor in input jquery

Question

Tengo 3 cuadros de texto para un número de teléfono. A medida que el usuario escribe, se mueve automáticamente de un cuadro de texto al siguiente. Cuando el usuario presiona retroceso, puedo mover el foco al cuadro de texto anterior. El problema es que en IE, el foco se establece al principio del cuadro de texto. Aquí está mi código, que funciona 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();
});

¿Cómo configuro el foco al final de los contenidos cuando retrocedo?

Answer 1

Código para cualquier navegador:

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

Answer 2

Debes codificar así.

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

Answer 3

Esta es la manera fácil de hacerlo. Si va hacia atrás, simplemente agregue $("#Prefix").val($("#Prefix").val()); después de establecer el foco

Esta es la forma más adecuada (limpia):

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

Answer 4

Esto funciona bien para mi . [Ref: el plug-in muy agradable de Gavin G]

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

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

Answer 5

Intenté muchas soluciones diferentes, la única que funcionó para mí se basó en la solución de Chris G en esta página (pero con una ligera modificación).

Lo he convertido en un complemento jQuery para uso futuro para cualquier persona que lo necesite

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

ejemplo de uso:

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

Answer 6

Uno puede usar estos javascript simples dentro de la etiqueta de entrada.

<input type="text" name="your_name" value="your_value"
     onfocus="this.setSelectionRange(this.value.length, this.value.length);" 
autofocus />

Answer 7

puede configurar el puntero en la última posición del cuadro de texto como se muestra a continuación.

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

Answer 8

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

Answer 9

var val =$("#inputname").val();
$("#inputname").removeAttr(''value'').attr(''value'', val).focus();
// I think this is beter for all browsers...