Easy-to-follow video tutorials help you learn software, creative, and business skills.Become a member
Events let our applications know when something has happened on our page. Forms have the ability to trigger special events that can be helpful for processing and validating. In this movie we're going to take a look at the elements selection events called, On Focus and On Blur. So we're going to be working with this form and I've left a little spot here where I want some feedback to happen when somebody enters one of these fields. So let me go into the code and show you that, that additional span is right here. It has an ID of my name hint and class of hint.
So I'm going to go all the way to the bottom of the page, and right before the closing body tag, I'm going to add a script. Now in this script, I want to get to the form element, so I'm going to add document dot the form. Which is the name of the form, and then the field that I want to get to, which is my name. And then add an event handler here. So, I'm going to add the onfocus event, just the event that happens when somebody enters an element. And this is going to execute a function literal. So that's a function with no name, and inside that I want to get to the element that I called mynamehint and change the HTML of that element to be a hint.
So the onBlur event is what happens when somebody exits a field. And all I need to do is just change the inner HTML of that to nothing once you leave that field. So, I'll save this, switch back to our form, refresh. And I'm going to hit Tab to get to that field, you can see the hint appearing right there. And if I hit Tab again, that hint will disappear, and it's that easy. By doing that on some of the other elements, I can add hints even to browsers that don't support placeholders. And that's really useful.
So, events like On-focus and On-blur make it possible to create forms that are interactive and provide feedback to the user during input. By helping the user be more precise, it's going to help them enter data that is more accurate, and easier to validate and process.
Get unlimited access to all courses for just $25/month.Become a member
82 Video lessons · 101596 Viewers
61 Video lessons · 88357 Viewers
71 Video lessons · 72203 Viewers
56 Video lessons · 103951 Viewers
Access exercise files from a button right under the course name.
Search within course videos and transcripts, and jump right to the results.
Remove icons showing you already watched videos if you want to start over.
Make the video wide, narrow, full-screen, or pop the player out of the page into its own window.
Click on text in the transcript to jump to that spot in the video. As the video plays, the relevant spot in the transcript will be highlighted.
Your file was successfully uploaded.