label inside input using jquery

Question

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

You also need to account for what happens if they leave the field blank and submit the form. — Andrew Marshall
– Andrew Marshall, Commented Mar 3, 2011 at 19:33

David Thomas · Accepted Answer · 2011-03-03 19:32:12Z

5

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

answered Mar 3, 2011 at 19:32

David Thomas

254k53 gold badges382 silver badges421 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Mark Coleman · Accepted Answer · 2011-03-03 19:43:25Z

2

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

edited Mar 3, 2011 at 19:43

answered Mar 3, 2011 at 19:36

Mark Coleman

40.9k9 gold badges84 silver badges101 bronze badges

2 Comments

braindamage Over a year ago

thanks! a little fix: if ($(this).val()=="") { $(this).val($(this).attr("title")); }

Dr. Max Völkel Over a year ago

I started with this script and added the ability to simply use the current value of the field, so there is no need to have a title attribute. Also added the necessary deferred executiion. <pre> $(document).ready(function(){ $('.inlineLabel').focus(function() { if ($(this).attr("initial") == undefined) { $(this).attr("initial",$(this).val()); } if ($(this).val() == $(this).attr("initial")) { $(this).val(""); } }).blur(function() { if ($(this).val() == "") { $(this).val($(this).attr("initial")); } }); }); </pre>

Collectives™ on Stack Overflow

label inside input using jquery

2 Answers 2

Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related