Input type "Text" to have a blurred text, which dissappears onFocus?

Question

Some websites have forms with input type="text". And inside these textboxes there is a blurred text, which says for example: "Enter your name here". And then onClick or OnFocus or whatever, the text dissappears and you can type into the textbox.

Like the title of posting a question here at stackoverflow, same thing.

How is this done easiest way? Would prefer if there was not too much js involved.

Thanks

Answer 1

That is done with an overlay. The text is not actually inside the input, but in a span above it. It is set to disappear when the user clicks.

Answer 2

That's not blurred text, it's called a "watermark." You can create the same effect by using inline onfocus() and onblur() statements on your input.

For example:

<input type="text" 
       class="watermark"
       value="Enter your name" 
       onfocus="if ( this.value == this.defaultValue || this.value == '' ) { this.value = ''; this.className = 'regular';}" 
       onblur="if ( this.value == '' ) { this.value = this.defaultValue; this.className='watermark';}" />

Then in your CSS file, you define classes for both .watermark and .regular. This way the text will be semi-transparent when displayed as a watermark and become completely opaque when the user types some information:

input.watermark {color:#ddd;}
input.regular {color:#000;}

Answer 3

I've never seen the text blurred (I suppose it's theoretically possible to do gaussian blur with a canvas but I've never seen it done).

However, it is very common to set the color of the input to be a shade of light gray ("color: #ccc", for example) and have the input contain some placeholder text. Then, onfocus, you remove the css color and set the value of the input to "".

Having the text dissapear onclick is not a good idea because people will likely select the input with tab.

ex:

<input type="text" id="awesome" style="color: #ccc" value="Type your name here."/>

<script>
    (function(){
        var placeholder = true;
        document.getElementById('awesome').onfocus = function(){
            if (placeholder) {
                this.value = '';
                this.style.color = '';
                placeholder = false;
            }
        };
    })();
</script>

Answer 4

Be careful with some of these simple add/remove label solutions posted, as their may be 1) usability issues due to the reliance on JavaScript and 2) you might have a bunch of submissions to your form that have "enter your name here" as the value.

Here's a good overview of the potential concerns and an offered solution. In fact, this solution is more like the SO "Ask Question" page, which uses a span overlay as opposed to showing/hiding text.

To implement this particular solution (there are others), you would download the script here, put it on your server, then include the following code:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"&gt;&lt;/script&gt;
<script src="/path/to/jquery.infieldlabel.min.js"></script>
<script>$(function(){ $("label").inFieldLabels(); });</script>