Consider utilizing jQuery for better functionality
Instructions on how to incorporate jQuery:
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
HTML snippet:
<input type="text" />
CSS styling:
.grey { color:#aaa; }
jQuery script:
var inputval = "";
$(document).ready(function() {
// Set default value for the input
$("input[type='text']").val("Enter your text here...");
// Apply grey color or a blur effect
$("input[type='text']").addClass('grey');
// Store the default value
inputval = $("input[type='text']").val();
$("input[type='text']").focusin(function() {
// Check if textbox is empty or has default value
if ($(this).val() == "" || $(this).val() == inputval) {
// Clear the box
$(this).val("");
// Remove grey color
$(this).removeClass('grey'); }
}).focusout(function() {
// Check if textbox is empty
if ($(this).val() == "") {
// Restore Default value
$(this).val(inputval);
// Reapply grey color
$(this).addClass('grey'); }
});
});
Test it out on jsfiddle: http://jsfiddle.net/BerkerYuceer/SWc6g/
This code example may not be optimal, but it illustrates the concept effectively.
An improved version is available below:
HTML snippet:
<input type="text" />
Enhanced jQuery script:
$(document).ready(function() {
Watermark("input[type='text']","Enter your text here...");
});
function Watermark(element, WatermarkString) {
$(element).val(WatermarkString).css('color','#aaa');
$(element).focusin(function() {
if ($(this).val() == "" || $(this).val() == WatermarkString) {
$(this).val("").css('color','#000'); }
}).focusout(function() {
if ($(this).val() == "") {
$(this).val(WatermarkString).css('color','#aaa'); }
});
};
Improved version on jsfiddle: http://jsfiddle.net/BerkerYuceer/vLJ2U/