Autor Tema: jquery ejemplo focus cambiar css al hacer click sobre elemento efecto desvanecer  (Leído 6347 veces)

anarubia

  • Sin experiencia
  • *
  • APR2.COM
  • Mensajes: 36
    • Ver Perfil
Buenas tardes. ¿como sería este código en jquery , para dar onfocus y onblur al elemento input (nombre, email)?, gracias

Código: [Seleccionar]
<form action="registro.php" method="get" name="miFormulario" id="miFormulario"
enctype="multipart/form-data">

<input type="text" name="usuario" id="usuario"  value="Escribe tu Nombre" tabindex=1
    onfocus="if (this.value == 'Escribe tu Nombre') {
        this.value = ''; this.style.background = 'transparent'; }"
   
    onblur="if (this.value == '') {
        this.value = 'Escribe tu Nombre';
     this.style.background = 'url(imagenes/online-red-icon.png)no-repeat'; }">
       

<input type="text"  name="email" id="email tabindex=2"
    value="Escribe tu email"
    onfocus="if (this.value == 'Escribe tu email') {
        this.value = ''; this.style.background = 'transparent'; }"
   
    onblur="if (this.value == '') {
        this.value = 'Escribe tu email';
     this.style.background = 'url(imagenes/descarga.png)no-repeat'; }">
   
</form>
« Última modificación: 23 de Septiembre 2015, 08:45 por Ogramar »

Ogramar

  • Moderador Global
  • Experto
  • *******
  • Mensajes: 2662
    • Ver Perfil
Re:jquery
« Respuesta #1 en: 22 de Septiembre 2015, 09:03 »
Hola Ana, a ver si alguien se anima y te hace la traducción, mientras tanto recomendable consultar tutoriales jQuery como http://www.tutorialspoint.com/jquery/ ó http://www.w3schools.com/jquery/ u otros

Salu2

anarubia

  • Sin experiencia
  • *
  • APR2.COM
  • Mensajes: 36
    • Ver Perfil
Re:jquery
« Respuesta #2 en: 22 de Septiembre 2015, 17:54 »
lo he intentado , pero no me sale, ¿ donde está el error? este es el código que he puesto
<script>
$(document).ready(function(){
$("usuario").focus ( function (){
$ ( this ). val ( '' );
$(this).css("background", "url(imagenes/online-red-icon.png)no-repeat");
}). blur ( function (){
$(this).val('Nombre');
$(this).css("background","url(imagenes/senal.png)no-repeat");
$(this).css("background-color", "gray"):
})
</script>
  ::)

Ogramar

  • Moderador Global
  • Experto
  • *******
  • Mensajes: 2662
    • Ver Perfil
Hola Ana fíjate en este ejemplo donde se usa focus (en este caso para mostrar un mensaje con efecto de desvanecimiento cuando se hace click sobre una casilla de formulario)

Código: [Seleccionar]
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script>
$(document).ready(function(){
    $("input").focus(function(){
        $("span").css({"display": "inline", "color": "red"}).fadeOut(2000);
    });
});
</script>
<style>
span {    display: none; }
</style>
</head>
<body>

<input>

<span>No olvides rellenar todos los campos</span>
<p>Hacer click en la casilla de datos</p>

</body>
</html>

anarubia

  • Sin experiencia
  • *
  • APR2.COM
  • Mensajes: 36
    • Ver Perfil
Gracias saludos

 

Sobre la educación, sólo puedo decir que es el tema más importante en el que nosotros, como pueblo, debemos involucrarnos.

Abraham Lincoln (1808-1865) Presidente estadounidense.

aprenderaprogramar.com: Desde 2006 comprometidos con la didáctica y divulgación de la programación

Preguntas y respuestas

¿Cómo establecer o cambiar la imagen asociada (avatar) de usuario?
  1. Inicia sesión con tu nombre de usuario y contraseña.
  2. Pulsa en perfil --> perfil del foro
  3. Elige la imagen personalizada que quieras usar. Puedes escogerla de una galería de imágenes o subirla desde tu ordenador.
  4. En la parte final de la página pulsa el botón "cambiar perfil".