In the last lesson, we looked at what happens when you have
an input and you put your mouse inside of it and then you like click.
And then you, It's called focusing.
You focus on the text area and you're able to
type what happens when you want to unfocused.
So value is going to be unfocused on me, on me.
And what we're going to do here is just select this using a regular selector, dot on.
And it's not called unfocused.
It's called blur.
And we give it a function.
Console.log.
You blurred away from this input area.
Okay, unfocused one mean,
that is a fun typo.
Let's also change out.
We now know that it's not called unfocused blur off of me.
There we go. Blur off of me.
And when I click in, nothing happens because that's the focus event.
And when I click out of it,
not when I move my mouse out of it,
but when I click out of it and you can see that outline goes away out of it.
It says, You blurred away from this input area.
And every time I do it,
it's going to trigger over and over and over.
Now if you're thinking, hey,
when is this going to be useful to me?
This is a really good example of whenever you're typing in your address or
someone types in a website URL and you want to work with that information,
we can get the value here.
We could say console dot log,
this dot val, blur off of me.
Doo-doo-doo-doo, 123123123. And when a blur out,
it says blur off me, 123123123.
And so now we can work with that information.
Not on every key up,
not when you focus on it,
just when you're done typing,
you can do something with it.
And so as an example, we could do something like
let website URL is equal to this dot val.
And then we can say if website URL dot substring 04 does not equal HTTP,
and we want to make sure that this is a website.
So this is going to be some sort of website URL, so like www.facebook.com.
But every website actually comes with HTTP.
That's the HTTP protocol.
And so we can now say the website URL is equal to.
And we can use a template literal here.
So we're using JavaScript ES6 and we can do HTTPS colon slash slash website URL.
And we're using back ticks for the template literal.
And then we can say this dot val is equal to the website URL.
And so what we're doing here is whenever you blur off of this,
if you have any sort of text in there that doesn't start with HTTP,
it's going to automatically add HTTP.
And then it's going to change that value to website URL.
Now that website you or might not possibly changing,
it might possibly change who, who knows.
It depends on what the user types.
So let's go ahead and, and write this as an example.
Let's go to facebook.com.
And when I blur out of here,
it automatically adds HTTP colon slash slash facebook.com.
And the nice thing about that is you can do user validation for them now.
So you know, when you sign up on a website and it's like
what is your website are what is your email address?
And it's like you put my website.com and it's like, oh,
actually you need that
HTTP before you can submit this form before you can actually sign up.
It's yes, I get it.
But also the developer can do that for us.
And you as the developer can now do that for the user,
making the user experience significantly better.
And that all happens with the blur function or the blur event listener.
Now we're talked about submitting a form. Just now.
Let's go ahead in the next lesson and see how we can prevent a form from submitting.