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
    123
45678910
11121314151617
18192021222324
2526272829 3031

Sabado 30 de Agosto 2025
Semana 35

..............................................................................................................................................................................................................................................
(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