jquery - last - Establecer el foco después del último carácter en el cuadro de texto
cursor in input jquery (9)
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?
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);
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()
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();
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();
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 />
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();
<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>
var val =$("#inputname").val();
$("#inputname").removeAttr(''value'').attr(''value'', val).focus();
// I think this is beter for all browsers...