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

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?

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

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

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

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

Debes codificar así.

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

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

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

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