In this article I will explain with an example, how to display default Text Label in Input TextBox using JavaScript in HTML
The process to display default Text Label in HTML Input TextBox is known as Watermarking.
 
 
Watermark JavaScript function
The script will be called on onblur and onfocus events of the textbox. The script simply does the following two checks.
1. If the TextBox is empty and the event type is blur event it sets the watermark and changes the font color as Gray.
2. If the TextBox text matches default text and the event type is the focus it clears the textbox and sets the font color as Black.
<script type = "text/javascript">
    var defaultText = "Enter your text here";
    function WaterMark(txt, evt)
    {
        if(txt.value.length == 0 && evt.type == "blur")
        {
            txt.style.color = "gray";
            txt.value = defaultText;
        }
        if(txt.value == defaultText && evt.type == "focus")
        {
            txt.style.color = "black";
            txt.value="";
        }
    }
</script>
 
 
Implementing the Watermark JavaScript with Input TextBox in HTML
The Watermark JavaScript function can be directly applied by attaching the onblur and onfocus event handlers and passing the reference of the TextBox and the event object.
<input type="text" id="txtName" value="Enter your text here" style="color: gray"
onblur="WaterMark(this, event);" onfocus="WaterMark(this, event);" />
 
 
Screenshot
Display default Text Label in HTML TextBox using JavaScript
 
 
Browser Compatibility

The above code has been tested in the following browsers.

Internet Explorer  FireFox  Chrome  Safari  Opera 

* All browser logos displayed above are property of their respective owners.

 
 
Demo
View Demo
 
 
Downloads
Download Code