label inside input using jquery
my "label" is inside the in开发者_运维百科put, so i want to empty the field when the user click and if its empty the "label" is back again
$('#name').focus(function() {
if ($(this).val()=="Your name") { $(this).val(""); }
}).blur(function() {
if ($(this).val()=="") { $(this).val("Your name") }
});
and this would be done to 3 or more fields, there's any better aprouch? without using plugins, just jquery
I think your method is probably almost as concise as it's going to get, but it's worth noting that html5 offers the placeholder
attribute to input
tags:
<input type="text" placeholder="Your name." />
JS Fiddle demo.
This is, of course, yet to make its way through to the non-modern browsers...
If you want to make it work with the other fields easily you could remove the check and place the Your name
value on the title attribute of the field.
$('.waterMarkInput').focus(function() {
if ($(this).val()==$(this).attr("title")) { $(this).val(""); }
}).blur(function() {
if ($(this).val()=="") { $(this).val($(this).attr("title")); }
});
And then your input fields could look like this:
<input type="text" value="" class="waterMarkInput" title="Your name"/>
精彩评论