Setting input value to attribute value in JQuery

Question

I have a number of <input /> boxes which I want to start off having a value of something like "Enter your name...".

When you focus them, the value becomes empty and you can type away. When you blur them, if nothing has been entered, then it goes back to "Enter your name...".

I thought of having something like this:

<input id="name" _startValue="Enter your name..." />

Then, something like this:

$(document).ready($("input").val($(this).attr(_startValue)));

This initially should set the value to _startValue but it does nothing. Replacing the line with:

$(document).ready($("input").val("hello"));

does work, however, so the problem must be with the $(this) or the attr().

First of all, how do I get this to work. Secondly, if I am trying to do this in a really retarded way, what is a good way to get this functionality?

As for the "this" issue, I think you should use $("input").each().val($(this)...)... as it would loop with all the inputs instead of dealing with the array that $("input") returned, I'm not really sure though. — Roger
– Roger, Commented Nov 26, 2012 at 5:47

Akhil Sekharan · Accepted Answer · 2012-11-26 04:39:16Z

4

I believe its better to use a placeholder like:

 <input id="name" placeholder="Enter your name..." />

answered Nov 26, 2012 at 4:39

Akhil Sekharan

12.7k8 gold badges43 silver badges58 bronze badges

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

Comments

Roger · Accepted Answer · 2012-11-26 04:48:06Z

There are already libraries for this, and if you are already using jquery you should use them.

https://github.com/mathiasbynens/jquery-placeholder

just add the attribute "placeholder" and invoque the function:

<input placeholder="my placeholder">
<script type="text/javascript">
    $("document").ready(function(){
        $("input").placeholder();
    });
</script>

Note that you only need to add the plugin if you need old browser support (in IE specially), otherwise, the attribute is enough.

Also, consider that if you code this, it will take you errors like submitting the default value of the form. What jquery plugins do generally is to make a <span> or whatever and place it on top of the input when the input is empty, and hide it when the input is not empty.

I Hate Lazy · Accepted Answer · 2012-11-26 04:40:04Z

1

                // v---you're not passing a function
 $(document).ready($("input").val($(this).attr(_startValue)));
          // `this` isn't magic-------^---- It doesn't just mean what you want

Should be more like this:

$(document).ready(function() {
    $("input").val(function() {
        return $(this).attr("_startValue");
    });
});

answered Nov 26, 2012 at 4:40

I Hate Lazy

49k13 gold badges89 silver badges79 bronze badges

2 Comments

user1002358 Over a year ago

Thanks, even though the placeholder is the best solution for my problem, this answer is still useful!

I Hate Lazy Over a year ago

@user1002358: Just be aware that placeholder is fairly new still. There are plenty of browsers in use that don't support it.

RobG · Accepted Answer · 2012-11-26 05:24:08Z

0

A common way to mimic placeholders is to put the placeholder text in the element's value, then check the value on focus like:

if (this.value == this.defaultValue) this.value = '';

and then on blur:

if (this.value == '') this.value = this.defaultValue;

Please don't use placeholders instead of labels or onscreen help (e.g. format for dates). If a browser doesn't support the placeholder attribute, it's probably best not to emulate them if using it for the default value is an issue.

After all, placeholders are a "nice to have", they should not be fundamental to using the form correctly.

answered Nov 26, 2012 at 5:24

RobG

148k32 gold badges180 silver badges216 bronze badges

Collectives™ on Stack Overflow

Setting input value to attribute value in JQuery

4 Answers 4

Comments

Comments

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related