Ejemplo del evento onblur en Javascript

  • Por
  • 25 de agosto de 2003
  • Valoración:
  • 7 Comentarios
  • Scripts en Javascript
Script en Javascript que muestra el trabajo con el evento onblur. Se comprueba la validez de un dato al salir del campo de texto donde está escrito.
Onblur se activa cuando el usuario retira el foco de la aplicación de un elemento de la página. El foco de la aplicación es el lugar donde está el cursor.

Si por ejemplo, estamos situados en un campo de texto y nos vamos de dicho campo, ya sea porque pulsamos con el ratón en otro campo del formulario o en un área vacía, ya sea porque el usuario a apretado el botón tabulador (Tab) que mueve el foco hasta el siguiente elemento de la página.

Si yo deseo que, al situarse fuera de un campo de texto, se compruebe que el valor introducido es correcto puedo utilizar onblur y llamar a una función que compruebe si el dato es correcto. Si no es correcto puedo obligar al foco de la aplicación a situarse nuevamente sobre el campo de texto y avisar al usuario para que cambie dicho valor.

Puede ser una manera interesante de asegurarnos que en un campo de texto se encuentra un valor válido. Aunque tiene alguna pega, como veremos más adelante.

Vamos a empezar por un caso sencillo, en el que solamente deseamos comprobar un campo de texto para asegurarnos que es un número entero.

Referencia: La función que valida un entero la hemos explicado en un taller anterior de Javascript: Validar entero en campo de formulario.

<html>
<head>
    <title>Evento onblur</title>

<script>
function validarEntero(valor){
    //intento convertir a entero.
    //si era un entero no le afecta, si no lo era lo intenta convertir
    valor = parseInt(valor)

    //Compruebo si es un valor numérico
    if (isNaN(valor)) {
       //entonces (no es numero) devuelvo el valor cadena vacia
       return ""
    }else{
       //En caso contrario (Si era un número) devuelvo el valor
       return valor
    }
}

function compruebaValidoEntero(){
    enteroValidado = validarEntero(document.f1.numero.value)
    if (enteroValidado == ""){
       //si era la cadena vacía es que no era válido. Lo aviso
       alert ("Debe escribir un entero!")
       //selecciono el texto
       document.f1.numero.select()
       //coloco otra vez el foco
       document.f1.numero.focus()
    }else
       document.f1.numero.value = enteroValidado
}
</script>
</head>
<body>
<form name=f1>
Escriba un número entero: <input type=text name=numero size=8 value="" onblur="compruebaValidoEntero()">
</form>

</body>
</html>

Al salirse del campo de texto (onblur) se ejecuta compruebaValidoEntero(), que utiliza la función validarEntero, explicada en un taller de Javascript. Si el valor devuelto por la función no es el de un entero, en este caso se recibiría una cadena vacía, muestra un mensaje en una caja alert, selecciona el texto escrito en la caja y coloca el foco de la aplicación en la caja de texto, para que el usuario coloque otro valor.

Hasta que el visitante no escriba un número entero en el campo de texto el foco de la aplicación permanecerá en el campo y continuará recibiendo mensajes de error.

Podemos ver este ejemplo en marcha en una página aparte.

Autor

Miguel Angel Alvarez

Miguel es fundador de DesarrolloWeb.com y la plataforma de formación online EscuelaIT. Comenzó en el mundo del desarrollo web en el año 1997, transformando su hobby en su trabajo.

Comentarios

alfono

02/10/2003
Buenas Tardes, me parece bueno este codigo, solo que al utilizarlo en el browser de mozila no respeta el focus al utilizar el tabulador, sabran ustede que se requiere para que lo respete? Gracias de antemano

Lluc

12/12/2003
La validación del entero no es del todo correcta. Me explico. Si le doy al campo del formulario el valor 22x4 la validación me retorna el valor 22. Es decir que se ha comido la x y el 4, pero no da un mensaje de error. Pienso que la forma correcta de validarlo sería lanzar un mensaje de error y vaciar el campo de texto.

Alexis Advance

23/6/2010
Alexis Advance
Una acotación:

Cuando el dato ingresado no pasa positivamente la validación, se debe enviar el foco al input antes de seleccionar lo que se haya escrito en él. En el ejemplo seleccionan el contenido antes de mandar el foco al input, y eso está mal.

franz1628

27/8/2010
codigo
Este codigo si funciona en todos los navegadores =)

<html>
<head>
<script type="text/javascript">
function Entero(){
elNumero=document.franz.numero.value;
copioNumero=elNumero;
elNumero=parseInt(elNumero);
if(isNaN(elNumero)&&(copioNumero!="")){
alert('Debe ser un numero!');
document.franz.numero.value="";
}
else{
if(!isNaN(elNumero))
document.franz.numero.value=elNumero;
}
}
</script>
</head>
<body>
<form name="franz">
Escriba un número entero: <input type="text" name="numero" size=8 value="" onKeyUp="Entero()" onClick="Entero()">
</form>
</body>
</html>

Geovanny Angulo

09/9/2010
Observé el codigo onBlur
Muchas felicitaciones su explicacion de la funcion onblur. Lo mejor de todo es q el código anexo se ejecuta sin problemas y se puede comprobar la explicación dada al respecto. Muchas gracias.

Geovany Angulo

09/9/2010
Suscribirme
Deseo suscribirme a su página. Qué debo hacer para ser miembre de su fan

wilfor

24/10/2012
felicitaciones
excelente el aporte, quisiera para validar solo letras

Compartir