Cambiar de TextBox mientras se escribe con JavaScript

Publicado por Alejandro Escario en

Hoy os traigo un código javascript que os permitirá, hacer que el usuario escriba un texto en varios TextBox de corrido sin tener que preocuparse de presionar teclas como Tab o simplemente el ratón.

El script hace lo siguiete; supogamos que el usuario ha de meter en un formulario HTML o ASP su número de tarjeta de crédito, o simplemente una fecha, en cualquiera de estos casos, si el dato se ha de introducir en un único campo de texto, puede que luego sea complicada su comprobación o incluso que el usuario de la aplicación inserte la cadena con un formato incorrecto, pues bién, la manera más sencilla de solventar este problema es dividir dicho campo en varios más pequeños que estén separados siguiendo un criterio que se corresponda con el dato a introducir.

Pero no todo lo que reluce es oro, ahora el usuario ha de preocuparse de cambiar de campo manualmente, ya sea mediante el uso del tabulador o del ratón, por lo que es el momento idóneo de hacer uso de este script.

/**
 * @author: Alejandro Escario Méndez
 * @site: https://www.dipler.org
 * @version: 1.0
 */

/**
 * @param c1 - id del campo en el que se quiere escribir
 * @param c2 - id del campo al que se desea saltar una vez se haya legado a la longitud adecuada
 * @param length - longitud que ha de tener el campo marcado por c1
 * @param event
 */
function cambio(c1, c2, length, e){
    var tecla = (document.all) ? e.keyCode : e.which;
    var str = document.getElementById(c1);
    var impr = false;
    var oSel;
    if(navigator.appName == 'Opera') return;
    if(document.selection){ // IE
        if (str.createTextRange){//Creamos el rango
            var seleccion = document.selection.createRange();
            str.caretPos = seleccion.duplicate();
            if (str.caretPos) {
                var caretPos = str.caretPos;
                caretPos.text = String.fromCharCode(tecla);
                seleccion.text = seleccion.text;
                str.caretPos.select();
            }
        }
        else
            str.value  = str.value;
    }else if (typeof str.selectionStart != 'undefined'){ //Firefox
        var before, after, selection, selectionStart;
        selectionStart = str.selectionStart;
        before= str.value.substring(0, str.selectionStart);
        selection = str.value.substring(str.selectionStart, str.selectionEnd);
        after = str.value.substring(str.selectionEnd, str.value.length);
        if(tecla == 8){
            return;
        }else if(tecla == 0){
            return;
        }else{
            if(before.length+after.length < length)
                str.value = String.concat(before, String.fromCharCode(tecla), after);
        }
        //Posicionamos el cursor en una posicion más
        str.setSelectionRange(before.length + 1, before.length + 1);
    }
    if(str.value.length >= length){
        document.getElementById(c2).focus();
    }
    return false;
}

¿Cómo funciona?, muy sencillo, simplemente hemos de añadir el control onKeyPress, en cada uno de los campos en los que queramos tener esta funcionalidad, de manera que el código nos quedaría algo parecido a esto:

<asp:TextBox ID="DiaN" runat="server" TabIndex="7" columns="2" MaxLength="2" onkeypress="return cambio('DiaN', 'MesN', 2, event);" onfocus="this.select();">
</asp:TextBox>
/
<asp:TextBox  ID="MesN" runat="server" MaxLength="2" columns="2" TabIndex="8" onkeypress="return cambio('MesN', 'AnoN', 2, event);" onfocus="this.select();">
</asp:TextBox>
/
<asp:TextBox ID="AnoN" runat="server" MaxLength="4" columns="2" TabIndex="9" onfocus="this.select();">
</asp:TextBox>
<input id="DiaN" name="textfield" type="text" id="textfield" size="2" maxlength="2" onkeypress="return cambio('DiaN', 'MesN', 2, event);"  onfocus="this.select();"/>
/
<input id="MesN" name="textfield2" type="text" id="textfield2" size="2" maxlength="2" onkeypress="return cambio('MesN', 'AnoN', 2, event);"  onfocus="this.select();"/>
 /
 <input id="AnoN" name="textfield3" type="text" id="textfield3" size="4" maxlength="4" onfocus="this.select();"/>

Si se observan detenidamente los codigos ASP y/o HTML se puede observar que hay una sentencia que dice onfocus=»this.select();», esto simplemente hace que el campo se seleccione al pasarle el foco.



/

/

*Nota: El script está preparado para funcionar en internet explorer y en firefox.


1 comentario

Me gusta lo que hago at Bit’n'Byte · diciembre 14, 2008 a las 3:35 pm

[…] que sé, aquellos problemas con los que me he peleado pero que finalmente he acabado solucionando (un ejemplo), cosas que he ido aprendiendo con mi formación o simplemente porque he encontrado algo que me […]

Los comentarios están cerrados.