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’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;}