In this article I will explain with an example, how to hide (remove) Placeholder in HTML5 TextBox on focus using CSS, JavaScript and jQuery.
The HTML5 Placeholder attribute does hide (gets removed) on focus in Internet Explorer (IE) by default but it does not hide (gets removed) on focus in FireFox and Chrome and hence this article will explain how to hide (remove) Placeholder in HTML5 TextBox using CSS, JavaScript and jQuery.
Hide (Remove) Placeholder in HTML5 TextBox on focus using JavaScript
The following HTML Markup consists of two HTML5 TextBoxes. The Placeholder attribute has been set for both the TextBoxes and a JavaScript function Watermark is called on onfocus and onblur events of both the TextBoxes.
Inside the Watermark JavaScript function, first the event type is checked.
If the event triggered is focus, then the value of the Placeholder attribute is copied to the REL attribute and the Placeholder attribute is removed.
If the event triggered is blur, then the value of the REL attribute is copied to the Placeholder attribute and the REL attribute is removed.
<script type="text/javascript">
function Watermark(input, event) {
if (event.type == "focus") {
input.setAttribute("rel", input.getAttribute("placeholder"));
input.removeAttribute("placeholder");
}
if (event.type == "blur") {
input.setAttribute("placeholder", input.getAttribute("rel"));
input.removeAttribute("rel");
}
}
</script>
<table>
<tr>
<td>First Name:</td>
<td><input placeholder="Enter First Name" type="text" onblur="Watermark(this, event);" onfocus="Watermark(this, event);"/></td>
</tr>
<tr>
<td>Last Name:</td>
<td><input placeholder="Enter Last Name" type="text" onblur="Watermark(this, event);" onfocus="Watermark(this, event);"/></td>
</tr>
</table>
Hide (Remove) Placeholder in HTML5 TextBox on focus using CSS and jQuery
The following HTML Markup consists of two HTML5 TextBoxes. The Placeholder attribute has been set for both the TextBoxes and a CSS class named Watermark is set to both the TextBoxes.
Inside the jQuery document ready event handler, the TextBoxes are selected using the Watermark CSS class and are assigned focus and blur event handlers.
Inside the focus event handler, the value of the Placeholder attribute is copied to the REL attribute and the Placeholder attribute is removed.
Inside the blur event handler, the value of the REL attribute is copied to the Placeholder attribute and the REL attribute is removed.
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript">
$(function () {
$(".Watermark").focus(function () {
$(this).attr("rel", $(this).attr("placeholder"));
$(this).removeAttr("placeholder");
});
$(".Watermark").blur(function () {
$(this).attr("placeholder", $(this).attr("rel"));
$(this).removeAttr("rel");
});
});
</script>
<table>
<tr>
<td>First Name:</td>
<td><input placeholder="Enter First Name" type="text" class="Watermark"/></td>
</tr>
<tr>
<td>Last Name:</td>
<td><input placeholder="Enter Last Name" type="text" class=”Watermark"/></td>
</tr>
</table>
Screenshot
![Hide (Remove) Placeholder in HTML5 TextBox on focus using CSS, JavaScript and jQuery]()
Browser Compatibility
The above code has been tested in the following browsers only in versions that support HTML5.
![Internet Explorer]()
![FireFox]()
![Chrome]()
![Safari]()
![Opera]()
* All browser logos displayed above are property of their respective owners.
Demo
Downloads
