2012-08-01 17 views
43

¿Cómo puedo borrar el valor predeterminado de un formulario de entrada en el foco con jquery y borrarlo de nuevo cuando se presiona ese botón?valor predeterminado de entrada de jquery clear

<html> 
     <form method="" action=""> 
      <input type="text" name="email" value="Email address" class="input" /> 
      <input type="submit" value="Sign Up" class="button" /> 
     </form> 
</html> 

<script> 
$(document).ready(function() { 
    //hide input text 
    $(".input").click(function(){ 
     if ($('.input').attr('value') == ''){ 
      $('.input').attr('value') = 'Email address'; alert('1');} 
     if ($('.input').attr('value') == 'Email address'){ 
      $('.input').attr('value') = ''} 
    }); 
}); 
</script> 
+6

¿Podría usar el atributo nativo 'placeholder' en su lugar? Hay varios [polyfills] (https://github.com/jamesallardice/Placeholders.js) disponibles para que funcionen en navegadores más antiguos. –

+0

@JamesAllardice ¿Por qué no lo publicaste como respuesta? Creo que es la mejor y más fácil solución. – jelies

+0

@jelies - No lo publiqué como respuesta porque si bien hace lo mismo que lo que el OP intenta hacer, realmente no responde lo que está mal con su código. Pero estoy de acuerdo, ¡definitivamente es la solución más fácil! –

Respuesta

83

Es posible utilizar este ..

<body> 
    <form method="" action=""> 
     <input type="text" name="email" class="input" /> 
     <input type="submit" value="Sign Up" class="button" /> 
    </form> 
</body> 

<script> 
    $(document).ready(function() { 
     $(".input").val("Email Address"); 
     $(".input").on("focus", function() { 
      $(".input").val(""); 
     }); 
     $(".button").on("click", function(event) { 
      $(".input").val(""); 
     }); 
    }); 
</script> 

Hablar de su propio código, el problema es que la API de jQuery attr se establece por

$('.input').attr('value','Email Adress'); 

y no como lo han hecho:

$('.input').attr('value') = 'Email address'; 
+0

He decidido usar esta respuesta ya que parece la más elegante. – viktor

+1

thnx.i mismo soy nuevo en jquery. Esta es mi primera respuesta aceptada aquí, y la tercera general (como probablemente pueda deducir por mis puntos de reputación) – Kaustubh

+0

Por qué '$ ('. Input'). RemoveAttr ('value')' ¿No funciona? –

3

Trate de que:

var defaultEmailNews = "Email address"; 
    $('input[name=email]').focus(function() { 
    if($(this).val() == defaultEmailNews) $(this).val(""); 
    }); 

    $('input[name=email]').focusout(function() { 
    if($(this).val() == "") $(this).val(defaultEmailNews); 
    }); 
3
$('.input').on('focus', function(){ 
    $(this).val(''); 
}); 

$('[type="submit"]').on('click', function(){ 
    $('.input').val(''); 
}); 
6

A menos que su realmente preocupado por navegador más antiguo que sólo podría utilizar el nuevo marcador de posición html5 atribuir este modo:

<input type="text" name="email" placeholder="Email address" class="input" /> 
+2

"A menos que realmente le preocupe el navegador más antiguo" ... puede rellenar el atributo 'placeholder' para que también funcione en los navegadores más antiguos. Vea mi comentario sobre la pregunta y vea la [Wiki de Modernizr] (https://github.com/Modernizr/Modernizr/wiki/HTML5-Cross-Browser-Polyfills) para ver otros ejemplos. –

+0

Sí, eso es cierto, o simplemente podría escribir un poco de JQuery para tirar del atributo usted mismo si está interesado. –

10
$(document).ready(function() { 
    //... 
//clear on focus 
$('.input').focus(function() { 
    $('.input').val(""); 
}); 
    //clear when submitted 
$('.button').click(function() { 
    $('.input').val(""); 
}); 

});

+0

Esto está mal '$ ('. Input'). Attr ('value') = 'Dirección de correo electrónico';', debe ser '$ ('. Input'). Attr ('value', 'Email address'); '¿cómo se vota por la respuesta? –

+1

@ToniMichelCaubet Editado la respuesta, gracias. Ese código no estaba relacionado con la pregunta de todos modos. Lo copié del código de topicstarter. –

2

Sólo una taquigrafía

$(document).ready(function() { 
    $(".input").val("Email Address"); 
     $(".input").on("focus click", function(){ 
      $(this).val(""); 
     }); 
    }); 
</script> 
Cuestiones relacionadas