Hello everybody. Welcome to the JavaScript course.
In this video, I'm going to discuss the focusing and blurring of elements in JavaScript .Some of the
elements allow users to interact with. For example, the text box, the radio button, the hyperlinks and so
on. So for those elements, we can use the focus and blur effects on them. We can also use the focus and
blur methods to generate the focusing and blurring events. We can also add tab index to allow the
focusing or blurring on ordinary el
ements, so that the elements that disallow focusing can be
focused. Finally we will talk about the focus in and focus out events, which allow bubbling, unlike
those focus and blur events that disallow bubbling Now let us see the HTML file first. The HTML file
has a lot of ... of elements this time. First, I have a title here and then I link the CSS file to
the HTML file so the CSS file is called styles. CSS. Okay. And in the body part, I have a number of
things. First, I have some input box
es, okay. And I have some divisions to show you some prompts later.
After that, I have a table. The table has a lot of um table data here and some table rows. After that,
I have an ordered list, okay. I also link the HTML file to the JavaScript file. So the JavaScript
file is called myScript.js, which is put in the js folder, okay. So the appearance of the web page
is like this, okay. The input boxes, followed by the table, followed by the ordered list, okay. And for
the CSS file, I want to
decorate my table a little bit. So I specify the table itself, and the table
data by mentioning the border involved. So you can see the borders are generated by the CSS file,
okay. Now let us go to the JavaScript file. In order for me to use the strict mode, I have to say "use
strict" on the first line of the JavaScript file And then let's talk about today's topic: focusing
and blurring. So in JavaScript, we have focus and blur events. So how can we make these two events by
using the user
input? Actually we can use a mouse or tab key to change the focus of the element
that allows users to interact with. That means we can use a mouse or we can use the tab key
to focus or blur those elements. For example, the text box, the radio button, the button,
and hyperlink and so on. And then the focused element will have a thicker border. So we can
see that the focused one will have a little bit of change in the appearance, okay. So in my
example here, I have already picked up a number
of elements. So some text and some text two
refer to the first two input boxes, okay And some prompt and some prompt two
refer to the two divisions underneath the input boxes, okay. So now I'm going to
interact with the two input boxes that allow us to do the interaction. So now
I'm going to do the focusing and blurring of the two elements that allow us to
do so, which are the two input boxes, okay. So I can and set up two event listeners.
The first event listener is doing the focus event
, and the other one is doing the blur event.
So when I really focus a certain element like the my text box here, I can just uh make a certain
anonymous function. And the division here wants to show the inner HTML as follows: "ready to
enter text". So I want to tell people that when you have focused a certain input box,
you can do the input now. So if the text box is blurred, that means if it loses its focus, I
can do something else. I can use an anonymous function to do so. So I have to put
the event
object into the argument. And then when I have the event object, which can sense the blurring,
I can just tell the division to say that "not ready to enter text" because your text box is
not on focus yet. So let us see the result now Save, reload. So when I press my mouse button
on the first input box, you can see that the division has told me to enter the text because it
is already ready to do so. So when I just um click on anywhere else on the web page, that element
will lose
its focus. And at that time, you can see that the text box is no longer ready to enter the
text, okay. Okay. Just like the uh events mentioned here, okay. The focus event and blur event, okay.
In addition to using the focus and blur event handlers. We can use the focus and blur methods on
an element. So we can make a focus on an element, or remove the focus from an element. So what does it
mean by that? Let us see an example. Suppose I've already picked up the text box, which is the first
on
e here. And now I want to add an event listener to listen to the key up event. So when the key
up event is happening, I would just like to do the show prompts function. And now I'm going
to tell you the way to show the um function content. Now you can see the function content now.
If the text box dot value equals abcedf, that means if the user enters abcedf, the other text box
can be focused by using the focus method, okay And then the division tells something to you now,
saying that you ca
n enter the second text box. Or if the first text box value is now uvwxyz, then I
would like to just blur the first text box. That means I want to lose the focus of that text
box. And then the division wants to say that you have to enter the first text text box again.
That means you didn't input the stuff correctly when you want to add some content in the second
text box. Or else, I just say nothing in the prompt division, okay. So that is my idea. So what will be
the result of this uh code
snippet? Let us see. Save, reload. So let me try to enter something a b c d e
f, okay. You can see that oh um the second text box is already getting the focus, just like here, okay.
And then I can just enter something in the second text box as told by the prompt, okay. So how about
the case when I enter something else like U V W X Y z, okay. You can see that the focus of the
first element is blurred. That means you can't see the thicker border, okay. So you can also
see that the statement
here becomes "enter first text box again". That means I'm not able to
satisfy the requirement shown in the function because I entered something that triggers the
blurring action, okay. So if I enter something else, you can see that the second division
shows nothing, okay. So you ... you can see that the function is able to recognize the values
and do the focusing or blurring accordingly Okay. The next part to talk about is the tab index.
So we already know that there are only some types of
elements that can do the focus or blurring,
okay. So is it possible to allow all the elements to become focused? Yes, it is possible. even though
those elements are not intended to be be focused, we can still make them have the ability to be
focused or blurred. For example, the table content, the division, or the list, and so on. These things are
not intended to be focused or blurred. But we can make them have this kind of ability. The idea is to
set up the tab index. So we set the index, s
o that the elements can be focused in a particular order.
That means the tab index has to follow some order, so that the computer knows which element would focus
first, and which element would be focused later The focus will take place for those elements with
the tab index first. So you can have other elements that are not having the tab index. In that case,
JavaScript will try to focus those elements with the tab index first, followed by those without
the tab index, okay. Then elements wit
hout tab index will be focused following the natural order
of focusing. The natural order here just means the uh normal flow of the HTML elements from top to
bottom and from left to right in general. So the focusing order specified by the tab index can be
something like this. The tab index will start with one, and then we go to two, three, and so on. But
we have two additional numbers that are allowed to become the tab index. First, we talk about zero
here. If the tab index is zero, it just
means that the element is able to do the focusing but in natural
order. That means that element will be just like ordinary elements without a specific positive tab
index specified. Okay. And if the tab index is minus one, we cannot use the tab key to focus it. But we
can just use the focus method to make a focus of that element. It is a bit abstract. So I'm going to
use an example to illustrate these two specific indices, as well as those ordinary indices allowed for
the tab index. So here
I have already picked up some data on my table. So you can see data one, data two,
data three, up to data six. They refer to just the first table data, the second table data, and so on,
okay. So my data 1 refers to the first data element. My data 4 refers to the fourth data element, and so
on, okay. Now I'm going to set the tab index of these elements. I can use my data one dot
tab index, okay. Here this "I" has to be a capital letter when we do the property,
okay. So tab index becomes thr
ee. So it would be the third element to be focused. So how
about data four here? I can have another tab index. So um word four will be focused a bit earlier
than the uh first data, okay, because you can see two is smaller than three. And how about data
five? Okay. Tab index becomes one. That means data 5 is the earliest data to be focused, even earlier
than uh word four here, okay. And how about data two? I use zero as the tab index for data two
here, okay. We will see the effect of tab ind
ex being equal to zero later. And how about
my data six, which is the last element here? The tab index is equal to minus one. So we can see
that I've have already used um so many possible tab indices to play with the focusing and blurring.
So let us try to do the focusing by using the tab key. Save, reload. So let me try to
press the tab key. So you can see that the first element to be focused
is just the data five here, which has the uh tab index of one, okay. And you will
expect that the
next one will be um word four. And you can see that when I press the tab key again, you can go to another
element with tab index equals 2, okay. And and then the third one will be just
data one shown here, okay. And let me try to press the tab key again. You can see that I just
go to the natural order. The first text box, the second text box, and then number two ... data number
two. You see that for data number two, I have a tab index of zero. That means this one just follows
the natural o
rder of the focusing, okay. And let me try again for another tab key. You can
see that I already leave the web page to do the focusing of the browser buttons already, okay.
So you can see that um data six here is never focused. Because I set it as minus one, I cannot
just use the tab key to focus it. If I want to focus um data six, which has a tab index of minus one,
how can I do so? I have to use a program to do so. Okay. I just say my data six
dot focus. So you can see that I can just use
the uh JavaScript program
to make a focusing of the element with tab index equals minus one. So
let us see the uh whole process again. Save, reload. Okay. When I just um reload
the page, you can see that word six has been focused already, because I used the program to
do the focusing of that element with tab index equals minus one. And what will be the next
element to do the focusing if I just press the tab key again? You can see that I just go
to the natural ordering. The first text box,
the second text box, and then uh data two, which
follows the natural ordering. And then I will go to the controls on my browser already. I have left
the web page already, okay. So you can see that the focus method here is able to help me focus
some elements with tab index equals minus one, okay. And this action will try to override the
original tab index. So that those indices that are able to be focused initially will fail.
And we will just do the natural ordering of the focusing after h
aving the uh focusing of uh
certain elements with tab index equals minus one, okay. The next topic to discuss is the bubbling
of the focus and blur events. Actually they are not allowed to bubble. That means we cannot have
event delegation to achieve. Okay. What does it mean by that? It means that we cannot assign event
handlers on the ancestor to control the focusing and blurring of all the descendants, okay. If we
want to do so, we have to use other two events called focus in and focus ou
t, because they can
bubble up, okay. So let us see an example of this situation. Now I want to pick up the list called
some list. And it refers to this ordered list, okay And we know that an ordered list is not
allowed to be interact with by using the tab key in general, okay. So if we want to
allow the focusing of the list content, we have to assign the tab index. Also I want to
pick up all the list elements and store them in a collection called my points, okay. So I use
the query selecto
r all method to pick up all the list elements, okay. And how can I assign the tab
index on the list content? Let me show you my way now. Okay. I can use this approach I want
to assign The tap index to each of the list elements. That means I want to assign each of
those elements with a tab index. The tab index is just uh in so-called natural order. So the first
element will be focused first, followed by the second one, third one, and the fourth one finally,
okay. That's why I would say i + o
ne here. The index starts with zero. So 0 + 1 means one. So this one
will have one be the tab index, this one we have two being the tab index and so on, okay. And after
I have assigned the tab indices to each of the list elements, I can use the focus in and focus out
events to help me do the event delegation. So for the focus in event, I want to make use of an
anonymous function to help me do something. So I have to pass the event object into the argument
of the anonymous function. And afte
r that, I want to pick up the event target, which is just meaning
the list elements that I have made focus on, okay And I want to change the background color to
yellow. That means when a certain element is already focused, I want to make the background
color to be yellow, okay. On the other hand, if the focus is lost, it will trigger the focus out
event. And in this case, I want to do something else. So I set up an anonymous function. And then
I put the event object into the argument of the
anonymous function. And the background color of
the element being focused out will turn to light green. So this is the idea. So I just use the focus
in and focus out events to act on my list, okay. So I just put something on top of the list elements.
So my list just refers to the uh ordered list. So it means that I just put the event handlers on the
ordered list, rather than on every single element in the list, okay. So it means that I'm trying
to do event delegation. So let's see the resu
lt Save, reload. So let me try to focus on the
first element maybe. So when I just click on that first element, I'm able to see that the
background color has turned to yellow because I have already triggered the focus in event.
And then I use the tab key, you can see that the focus is lost, so that the background color
turns to light green shown here, okay. So when I just click on the other one, you can see that the
list element two is focused now. So it turns to yellow. And when I leave th
e focus of it, you can
see that it turns to light green, okay. So when I use the mouse as well, I can do the same effect.
So when I click on list three, you can see that list three has turned to yellow. And when I just
click on this list one for example, you can see that list three has turned to light green because
it already lost its focus. And now when I just click on list one, list one becomes the element
being focused. So it turns to yellow back, okay So when I click on list four, you c
an see that
list one has turned to light green because it already lost its focus. And at the same time um
list four has got the focus, okay. So you can see that we can do some kind of event delegation
by using the focus in and the focus out events, okay. So this video has already talked about the
way to do focusing and blurring in JavaScript. We can use the focus and blur events. We can use
the focus and blur methods like those methods shown here, okay. And then in order for all the
elemen
ts to have the ability to be focused or blurred, we can just set the tab index on each
of those elements. And we have to take care of the ordering of the tab indices. So for
the tab index, it starts with one. And then from two to three and so on. And we have two
specific indices called zero and minus one to serve some other specific purposes, okay. And
of course we can understand that the focus and blur events do not bubble. In order to do
event delegation, we can use the focus in and focus
out events instead. This is the end
of the video. If you have any questions about my video, please leave your questions on the
comment section below the video. If you like this video, please give me a like and please
subscribe to my channel. Thank you for watching
Comments