jquery clear input default value

How can I clear the default value of an input form onfocus with jquery and clear it again when tha submit button is pressed?

<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>
373201 次浏览
小开

Try that:

  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);
});
小开 
$('.input').on('focus', function(){
$(this).val('');
});


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

Unless you're really worried about older browsers, you could just use the new html5 placeholder attribute like so:

<input type="text" name="email" placeholder="Email address" class="input" />
小开 
$(document).ready(function() {
//...
//clear on focus
$('.input').focus(function() {
$('.input').val("");
});
//clear when submitted
$('.button').click(function() {
$('.input').val("");
});

});

小开
最佳答案

You may use this..

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

Talking of your own code, the problem is that the attr api of jquery is set by

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

and not as you have done:

$('.input').attr('value') = 'Email address';
小开

Just a shorthand

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

提交答案