HTML and CSS Reference
In-Depth Information
<!DOCTYPE html>
<html>
<head>
<title>Altering Form Values</title>
<script src=”jquery-1.4.2.min.js” type=”text/javascript” charset=”utf-
8”></script>
<script type=”text/javascript” charset=”utf-8”>
$(function () {
$(“input[name='email']”).focus(function () {
if ($(this).val() == “person@example.com”) {
$(this).val(“”);
$(this).css(“color”, “black”);
}
});
$(“input[name='email']”).blur(function () {
if ($(this).val() == “”) {
$(this).val(“person@example.com”);
$(this).css(“color”, “#999”);
}
});
});
</script>
<style type=”text/css” media=”screen”>
input[name=”email”] { color: #999; }
</style>
</head>
<body>
<form>
<label>
Email address:
<input name=”email” value=”person@example.com”
size=”40” /></label>
</form>
</body>
</html>
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
person@example.com
. 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.
