Enter Type to have blurry text that disappears on focus?
Some websites have forms with input type = "text". And inside those text boxes there is blurry text that says, for example, "Enter your name here." And then onClick or OnFocus or whatever, the text disappears and you can enter text into the textbox.
Like the title of posting the question here on stackoverflow, same thing.
What is the easiest way to do this? Would prefer it if there weren't too many js involved.
thanks
This is not blurry text, it is called a "watermark". You can create the same effect using the built-in onfocus () and onblur () statements on your input.
For instance:
<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 you define a class in your CSS file for both .watermark
and for .regular
. Thus, the text will be semi-transparent when displayed as a watermark and will become completely opaque when the user types in some information:
input.watermark {color:#ddd;}
input.regular {color:#000;}
a source to share
Be wary of some of these simple solutions for adding / removing shortcuts as they can be 1) usability issues due to JavaScript dependency and 2) you can have many views in your form that "enter your name" here " as a value.
Here's a good overview of potential problems and suggested solutions. Actually this solution looks more like the SO "Ask Question" page, which uses a range overlay rather than showing / hiding text.
To implement this particular solution (there are others), you upload the script here , put it on your server, then enter the following code:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script src="/path/to/jquery.infieldlabel.min.js"></script>
<script>$(function(){ $("label").inFieldLabels(); });</script>
a source to share
I have never seen text blurred (I suppose it is theoretically possible to do a Gaussian blur with a canvas, but I have never seen it).
However, it is very common to set the input color as a shade of light gray (for example, "color: #ccc") and contain some placeholder text in it. Then, on focus, you remove the css color and set the input value to "".
Having the disapear onclick text is not a good idea because people are more likely to select the tab input.
Example:
<input type="text" id="awesome" style="color: #ccc" value="Type your name here."/>
<script>
(function(){
var placeholder = true;
var awesome = document.getElementById('awesome');
var old_event = null;
if (awesome.onfocus) {
old_event = awesome.onfocus;
}
awesome.onfocus = function(){
if (placeholder) {
this.value = '';
this.style.color = 'inherit';
placeholder = false;
}
if (old_event) {
old_event.apply(this, arguments);
}
};
})();
</script>
a source to share