jQuery Tutorial - 40 - Focus in Video Lecture | Importance of jQuery in Website Development - IT & Software

hi this is Alex from PHP academy' de org
with a video tutorial for the new Boston
in this tutorial we're going to be
looking at the jquery focus in event
handler and then in the next video we're
going to be looking at the focus out
handler essentially what we're going to
be creating is a form field where the
user would be to type for example their
name and when we focus in we're going to
give the user a bit more information to
help them out and then when they focus
away perhaps onto the page itself or on
to another field we remove this span
text so just so we can get the idea of
what we're creating let's go ahead and
create our input type our input field
and as well as span so input type is
equal to text and I'm going to give this
an ID of name I'm then going to create a
span afterwards and the ID of the span
is going to be say name span and I'll in
that span tag there I just have to label
in front of here so for example your
name now let's go refresh our page in
our browser and see this you've got your
name and we can type in a name here now
what we want to happen is as soon as the
user focuses in to this field either by
tabbing down the page for example they
might come from this field to another
field that's why we're using focus in
and not the on click or the click event
in jQuery if we were to use the click
event for this the user would have to
click rather than tab down the page so
as soon as this field is in focus in
some way or another then the span here
will give us a bit more information so
let's go ahead and start to create our
our javascript file
I'm gonna save it in the J's folder and
I'm gonna call this focus is okay so
inside index dot PHP we need to include
this in our page so let's go ahead and
include this here so the script type is
text
slash JavaScript the source is Jay s /fo
'kiss dr. J s and will come just to end
at the script there so now we've
included focused at Jay s we can go
ahead and start to write the code inside
so we reference the text field with
creative which is name so we can write
in here hash name now we want to say
focus in so dot focus in and this is the
event handler and that we need inside of
this we're going to create a function
and we'll just pull that down so we can
work inside a block here now what we
want to do is add some text to this span
here so let's go ahead and reference
that we're gonna say hash named span dot
HTML and we can write in enter your full
name so now what's going to happen is
when we refresh our page
and we click here we get this text enter
your full name now let's go ahead and
duplicate the current field we have and
actually create something else so I'm
gonna say your age I'm going to keep
this as a input type of text but I'm
going to change this to age and
similarly similarly I'm going to change
this to age as well oh no sorry yep we
need age just here so let's surround
these in paragraphs just to separate
this out and we'll be able to see out
two fields one below each other so when
we click on your name it says unto your
full name when we cook on age nothing
happens at the moment because we don't
have a handle of this let's take the
easy option and we'll go and just copy
and paste this down and we'll change
this here to age we'll change this here
to age and we'll change the message so
enter your
current age okay so now that that's
working when we click on your name we
get this spam filled with this text when
we click on here we get this span filled
with this text however what happens if
we were to click on your name and then
we tab down we still get the text if we
were using the click function or the
click event handler you'll notice that
it will work a bit differently so let's
change both of these to click refresh
the page in our browser when I click on
it it still works we still have this
information relayed back to the user
however I'm going to press tab on my
keyboard to tab down to age and you'll
see that we don't get this text appear
in the span here so the reason we use
focus in is to actually allow this event
to take place or this event handler to
be called when we actually have focus on
the text area rather than a user
clicking on it it's extremely unlikely
that a user would come along to a
website and click each individual field
so now that we know the reason why we
use the focus in in the next tutorial
we're going to be looking at focus out
to get rid of this span when the user
focuses away from it