JavaScript: Working with OnBlur and OnFocus Events


show more onFocus and onBlur are very useful events for working with forms in JavaScript. Watch this tutorial to learn onFocus and onBlur to detect when users enter and exit form fields and react accordingly, such as displaying prompt text or validating the form data. show less
please wait ...

Working with onBlur and onFocus events

Here are two more events, very useful when working with forms. No doubt you've seen this one before. You're filling out a form on a web site and one or more of the fields actually has a value already pre-filled in, perhaps prompting you what to do. You can either click in there or tab into that location and that text will disappear. However, if I tab out of it again, the text comes back to prompt me that I need to put something in there. This is very easy to do using the onfocus and onblur events in JavaScript.

Every one of our form elements here gets an onfocus event kicked off when we click into it, or when we hit the Tab key and tab into it, and when we leave it, that element gets the onblur event. So to create something like this behavior is very simple indeed. Let's take a look at the HTML, then the JavaScript. My HTML is nothing special. I have a form created and I have an input element here for the email, and it has got an ID of email.

And simply, in the JavaScript, Line ...

Working with onBlur and onFocus events
Video duration: 2m 36s 5h 31m Beginner

Viewers:

onFocus and onBlur are very useful events for working with forms in JavaScript. Watch this tutorial to learn onFocus and onBlur to detect when users enter and exit form fields and react accordingly, such as displaying prompt text or validating the form data.

Subjects:
Developer Web
Software:
JavaScript
Author:
please wait ...