HTML and CSS Reference
In-Depth Information
$("#search").submit(function() {
if ($("#query").val() ==
$("#query").attr('placeholder')) {
return false;
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
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!):
<script src="modernizr.js"></script>
<script src="jquery.js"></script>
<script src="jquery-ui.js"></script>
<link href="jquery-ui.css" rel="stylesheet">
Code your form using the date input type:
<p><label>Date of Birth <input type="date" name="dob" id="dob"></label></p>
Search WWH ::

Custom Search