jquery清除input的默认值
我怎样才能清除焦点与jQuery的input表单的默认值,并按下提交button时再次清除?
<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>
你可以用这个..
<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>
说起你自己的代码,问题在于jquery的attr api是由…设置的
$('.input').attr('value','Email Adress');
而不是你所做的:
$('.input').attr('value') = 'Email address';
$(document).ready(function() { //... //clear on focus $('.input').focus(function() { $('.input').val(""); }); //clear when submitted $('.button').click(function() { $('.input').val(""); });
});
除非你真的担心旧的浏览器,你可以使用新的HTML5占位符属性,如下所示:
<input type="text" name="email" placeholder="Email address" class="input" />
尝试一下:
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(''); });
只是一个速记
$(document).ready(function() { $(".input").val("Email Address"); $(".input").on("focus click", function(){ $(this).val(""); }); }); </script>