HTML and CSS Reference
In-Depth Information
<!DOCTYPE html>
<title>Altering Form Values</title>
<script src=”jquery-1.4.2.min.js” type=”text/javascript” charset=”utf-
<script type=”text/javascript” charset=”utf-8”>
$(function () {
$(“input[name='email']”).focus(function () {
if ($(this).val() == “”) {
$(this).css(“color”, “black”);
$(“input[name='email']”).blur(function () {
if ($(this).val() == “”) {
$(this).css(“color”, “#999”);
<style type=”text/css” media=”screen”>
input[name=”email”] { color: #999; }
<label> Email address: <input name=”email” value=””
size=”40” /></label>
Again, I use two event handlers in this example. The event handlers are new, as is the
selector. Here's one of them:
$(“input[name='email']”).focus(function () {
In this case, I'm using a selector that's based on an attribute value. It matches an input
field where the name attribute is set to email , and it binds to the focus event. This event
fires when the user places the cursor in that field. The event handler for the focus event
does two things: sets the value of the field to an empty string and changes the color from
gray to black, but only if the value is . If it's something else, it's a
value the user entered and should be left alone. Figure 16.9 shows what the form looks
like when the user initially clicks in the field.
Search WWH ::

Custom Search