HTML and CSS Reference
In-Depth Information
FIGURE 16.9
The contents of
the email field are
removed when the
user clicks in it.
The other event handler is bound to the blur event, which fires when the cursor leaves the
field. If the field has no value, it changes the color back to gray and puts the example
input back into the field.
16
Manipulating Attributes Directly
You can also use jQuery to manipulate the attributes of elements directly. For example,
disabling a form field entirely requires you to modify the
disabled
attribute of that field.
I've added a Submit button to the form from the previous example, and set it to
disabled
. Here's the new form:
<form>
<label>
Email address:
<input name=”email” value=”person@example.com”
size=”40”>
<input id=”emailFormSubmit” type=”submit” disabled>
</form>
Figure 16.10 shows the form with the sample content and the disabled Submit button.
FIGURE 16.10
This form contains
sample content,
and the Submit
button is disabled.
I only want to let users click the Submit button if they've already entered an email
address. To add that check, I need to add a bit of code to the
blur
event for the email
field, as shown:
$(“input[name='email']”).blur(function () {
if ($(this).val() == “”) {
$(this).val(“person@example.com”);
