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
181920 21222324
252627282930 

Jueves 21 de Noviembre 2024
Semana 47

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