jQuery Tutorial - 33 - Key up/down Video Lecture | Importance of jQuery in Website Development - IT & Software

hi this is Alex from PHP academy' no org
with a video tutorial for the new Boston
in this video we're going to look at the
key up and key down functionality in
jQuery now when you go to web sites such
as Twitter comm and you look at the area
that you are type that you would type a
tweet in you'll notice that you have
things like a character countdown now
these are the checks in the background
are based on when you press a key on
your keyboard so in this example we're
going to look at the the key up and the
key down event handling and how we can
produce some output based on this so
essentially what we're going to do is
we're going to give the user a text
field a text input field and then we're
going to allow them to type inside of
this which is just a standard HTML form
field what we're then going to do is
display the contents outside of the
field so we're not really creating
anything practical but you're going to
get the hang of this key up and key down
functionality so the first thing we want
to do is create a another javascript
file which is going to handle our events
so let's create a new a new file in our
text editor and I'm going to save this
as keys jus so I've now got keys is
inside this J's folder and inside the
index dot PHP I can go ahead and
actually set up to include this so I'm
going to say script type is equal to
text forward slash JavaScript and end
that script there the source is going to
be J s /k j s so now keys j s is going
to handle the events that we you know
want to well the event of a key up or
key down so let's build up our page to
give you a give you a rough idea of what
what we're actually going to achieve so
I'm going to create an input field and
this is going to be text the ID of this
is going to be a user
and that's what we need for now now
let's go to our browser and have a look
at this we just have a text area where
we can type something in here now what
I'm going to do is create a div just
below here or we can create a span of
gas and the span ID is going to be a
text or user text feedback so I've
called this user text feedback and this
is user text now the idea of this
tutorial to demonstrate we're going to
type we're going to allow the user to
type something into this text field and
as they're typing we're going to relay
what they're typing inside of this span
so essentially what's going to happen is
as I type characters here for example a
a will then appear underneath when I
type B B will appear underneath and this
is all without refreshing the page
obviously so let's go ahead to our keys
Jes and start to create our event
handler now we need to reference our
input text a text field which is user
underscore text so we know that in here
we can write hash user text we can then
say dot now this is where we call the
event handler so I'm going to say key up
or key down we'll say now instead of
here we need to create a function that's
going to run a block of code based on
when the user presses a key down so
function and then here we can create
start to create our code in here so
let's just for an example now say alert
key down now what's going to happen is
when the user presses a key down while
they're inside of the user text field
we're going to alert key down so let's
go over to our page and test this out
I'm going to click inside of here and
I'm just going to type a now you can see
that we now have a an alert box saying
key down so we know that this works now
it's an important part of testing I know
I do especially use alert boxes a lot
just to test event handling so we can
just press
carry on that even when we press a
backspace we get the key down and then
you can see that the a disappears so now
that we know this works we can get rid
of the alert and we can start to
actually write out the input into this
user text feedback span so we need to
grab the value of this text field in
order to display it out so what we need
to do is we need to create this value so
I'm going to create a variable and I'm
going to call this user underscore text
and that's going to be equal to the
value that the user has currently typed
inside of the element now to do this we
just need to say hash user text dot Val
the Val function will take the value
that's currently inside of this text
area okay or this input text so now that
we've got the value here we can go ahead
and echo that out again just to see if
it's working so let's go ahead and
refresh the page I'm going to type in a
now the one thing you'll notice is that
nothing has been relayed back to this
alert box however when I go ahead and
press another key we get the first we
get the first thing we typed now we'll
look at this problem in a moment however
I'll briefly explain why we come across
it when we use the keydown function the
event inside for example this event
inside of here the functionality here
will be executed or run straight away it
won't wait to actually grab the value
because we're grabbing the value after
the key down once we've pressed the key
down this will be run straight away
therefore it won't give this enough time
to grab the current value and we'll
change it in a minute and look at the
key up event handler which will solve
the problem so we'll go ahead and write
the rest of the code and then we'll look
at solving this problem in a moment so
what we now need to do is relay this
value back to user text feedback so what
we can do is say a dollar sign in
here user text feedback dot HTML HTML is
a function we'll look at a bit later
however this just adds some code to this
the current element
however we will worry about that a bit
later when we come to it so HTML is
going to output a value into this span
that we've created here so let's go
ahead and type in user underscore text
inside of here
so now essentially whatever the value is
returned here will be input into this
user text feedback field so let's go
ahead and test this let's just get rid
of that and refresh the page okay so
let's go ahead and start typing some
data into here I'm going to type a
you'll see nothing has appeared down
here however when I type B you'll see oh
well it's next to the text field but
you'll see that we're getting the same
problem as we had when we were using
when we use the alert box so as I type
it still relays the data however we're
not getting the information in the
correct order you'll also notice that
when I type ABC and I press backspace
you'll see C appear at the end of this a
B here okay so when we press M when we
use the key down event handler it
doesn't relay the information in here in
time for us to see it so what we do is
we instead use key up so if you're
having this problem then key up is the
the other event handler to use so let's
go ahead and test this now a b c you can
see that it's writing it in exactly the
same time as we're typing it so in this
tutorial we've looked at the key down in
the key up function the differences
between them and where key up should be
used in this case one which retrieving a
value and we've successfully created an
input box which will relay information
as it's being typed