« | »
Dec'08
1

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: http://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.

Si disfrutaste del artículo, puedes suscríbete a nuestro feed RSS
Etiqueta(s):
Categoría(s): Producción propia, Programación
Si te gustó este artículo o bien deseas seguirnos diariamente tal vez desees suscribirte a nuestro canal RSS vía email o bien vía lector de feeds. Recuerda que si usas tu email debes verificar la activación de tu suscripción (si tarda mucho revisa en tu carpeta spam).
Puedes dejar un comentario, o hacer un Trackback desde tu sitio.

Hay un comentario en “Cambiar de TextBox mientras se escribe con JavaScript”

  1. […] 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 […]

Deje su comentario

XHTML: Puedes utilizar algunos códigos HTML: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

« | »