HTML and CSS Reference
In-Depth Information
});
$("#query").blur();
$("#search").submit(function() {
if ($("#query").val() ==
$("#query").attr('placeholder')) {
return false;
}
});
}
</script>
Even if you've never seen jQuery before, the above code is probably very easy to read.
jQuery uses CSS selector syntax to refer to elements in the DOM, so
$("#query")
refers
to the search input field with an
id
of query. The
focus()
and
blur()
methods are
chained onto the search field, thus creating event handlers for when the field gains and
loses focus. Finally, when the search form is submitted, the value of the search field is
checked to ensure it's not the same as the placeholder copy; if it is, the form is not
submitted.
When the blur event is triggered, the value (
val
) of the search field is set to the
place
holder
attribute value, provided the value was empty.
When the focus event is triggered, the value of the search field is set to an empty string—
but only if the previous value was the same as the
placeholder
attribute text.
This script can appear immediately after the form, or it can be combined with other
scripts at the bottom of the
body
of your document.
This techniques works well with all input types except password.
Because browsers obscure the value of a password control, using the
above solution results in your placeholder text appearing in an obscured
manner. If you need to display placeholder text for a password input
field, use JavaScript to insert the copy somewhere other than the value
of the input.
Example 3: Supporting the date input type
Call Modernizr, jQuery, and jQuery UI in the
head
of your document (don't forget the
CSS for jQuery UI!):
<head>
<script src="modernizr.js"></script>
<script src="jquery.js"></script>
<script src="jquery-ui.js"></script>
<link href="jquery-ui.css" rel="stylesheet">
</head>
Code your form using the
date
input type:
<form>
<p><label>Date of Birth <input type="date" name="dob" id="dob"></label></p>
