Temas > Programacion > Java script - Java > Evento blur en jQuery
Julio

Evento blur
El evento blur se dispara cuando pierde el foco el control.
Podemos capturar el evento blur de un control de tipo text, 
textarea, button, checkbox, fileupload, password, radio, reset 
y submit.
Para probar su funcionamiento dispondremos dos controles 
de tipo text con algún contenido. Fijaremos de color azul su 
fuente. Al tomar foco el control cambiará a color rojo y al perder 
el foco volverá a color azul.
pagina1.html
<?php //esto no va
 <html>
 <head>
 <title>Problema</title>
 <link rel="StyleSheet" href="estilos.css" type="text/css">
 <script type="text/javascript" src="../jquery.js"></script>
 <script type="text/javascript" src="funciones.js"></script>
 </head>
 <body>
 <form action="#" method="post">
 <input type="text" name="text1" id="text1" value="Hola"
 size="20">
 <br>
 <input type="text" name="text2" id="text2" value="Hola"
 size="20">
 </form>
 </body>
 </html>
?>//esto no va
funciones.js
<?php //esto no va
 var x;
 x=$(document);
 x.ready(inicializarEventos);
 function inicializarEventos()
 {
    var x=$("#text1");
    x.focus(tomaFoco);
    x.blur(pierdeFoco);
    x=$("#text2");
    x.focus(tomaFoco);
    x.blur(pierdeFoco);
 }
 function tomaFoco()
 {
    var x=$(this);
    x.css("color","#f00");
 }
 function pierdeFoco()
 {
    var x=$(this);
    x.css("color","#00f");
 }
?>//esto no va
estilos.css
<?php //esto no va
 #text1,#text2 {
    color:#00f;
 }
?>//esto no va
En la función inicializar eventos asociamos los eventos 
focus y blur a los dos controles:
<?php //esto no va
function inicializarEventos()
{
   var x=$("#text1");
   x.focus(tomaFoco);
   x.blur(pierdeFoco);
   x=$("#text2");
   x.focus(tomaFoco);
   x.blur(pierdeFoco);
}
?>//esto no va
El evento tomaFoco cambia de color a rojo al texto del 
control seleccionado: 
<?php //esto no va
function tomaFoco()
{
   var x=$(this);
   x.css("color","#f00");
}
?>//esto no va
De forma similar pierdeFoco cambia a azul:
<?php //esto no va
function pierdeFoco()
{
  var x=$(this);
  x.css("color","#00f");
}
?>//esto no va













¿Has olviado tu contraseña?

Pulsa aquí para registrate




Google




LunMarMieJueVieSabDom
       
1234567
8910111213 14
15161718192021
22232425262728
2930     

Domingo 14 de Septiembre 2025
Semana 37

..............................................................................................................................................................................................................................................
(Contacto)..
Esta web utiliza cookies para obtener datos estadísticos de la navegación de sus usuarios. Política de privacidad y Aviso legal
Rechazar    Aceptar