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?

Answer 1

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.