CODEWITHSUNDEEP
jqueryinputlabel
braindamage
braindamage

Reputation: 2256

label inside input using jquery

my "label" is inside the input, 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

Upvotes: 2

Views: 8989

Answers (2)

Mark Coleman
Mark Coleman

Reputation: 40863

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

Upvotes: 2

David Thomas
David Thomas

Reputation: 253318

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

Upvotes: 5

Related Questions