This video I'm going to pick up where we left off and keep talking about those three Jay queery events
.
So the next one that I want to introduce is called Keep press so key press is one of the ways in Jay
Cory that we can add a key press listener to elements so I'll show you on the docks here if we go down
to the event section and we look at key down and key press and key up these are three different events
that are triggered when a user type something on the keyboard and the differences are a little bit nuanced
.
So key down is fired any time that we press a key and it's fired right after we press it down and then
key up is fired when we release the key and then key press is a little bit different.
Some people will tell you that key press is fired when you press a key down and then release it so that
it represents the entire key press up and down.
And that is not true.
It actually fires in between down and keep up.
Usually not always.
So we have a great stack overflow post.
So I recommend that you read.
I want to point out this little piece here so key down and key up provide a code indicating which key
is pressed while key press indicates which character was entered.
So a good example of this is that if I have a text input and someone types shift and then a and they're
trying to make an uppercase a key down and key up will fire on the shift key and on the lower case a
VS key press will fire on an uppercase a so it actually gives me the character not just that the key
is that were pressed and in what order but the actual end result character when we use a modifier key
like shift at the end of the day the three different events are very similar.
And most of the time you can get away with using any of them and I'm going to Shoki press just because
it's the most common so key press works just like Click where we select something with dollar sign.
So here's an example which selects something with dollar sign.
And then we change on key press and we pass in a callback function and that callback function will be
called any time a key press event is triggered on the selected element or collection of elements.
So I'm going to demonstrate that now I'll go back to my HMO and let's add in an input type equals text
just like that.
And we'll leave it at that and refresh our page.
OK so now we have an input here.
And let's get some code that will just cancel that log any time a key is pressed in here.
So open up the console and we need to first select the input so we can just do inputs like that.
And that's not very specific in this case.
There's only one input so that's fine.
But if we had checkboxes and if we had color inputs and radio buttons we would want to specify only
where type is equal to text.
But for now input is fine.
Make sure we get it right that selects it then we add that key press just like that.
And then inside of here we add a callback function which will be called any time a key is pressed.
So in this case let's just have it cancel the log you've pressed a key and hit enter.
And now if I go over here and I type a key.
So I'm hitting the letter P right now.
You can see I get you press to key and if I type another key All it does is show me a number here.
That's just how Chrome does it.
But I'm getting a different concept log as I type for every character.
So that's how we could cancel that log to character something that we often want to do is run some code
depending on which character was pressed.
We'll be making a to do list app with Jay Querrey where you can type in new to do like Walk the dog
and hit enter and that will then take that text in here and make a new to do and then clear the input
so you don't have to click a button like submit.
You just hit the enter key.
So what we want to do is listen for a key press but only do something if the user hits enter.
In order to do that we actually need to change our code a little bit here.
So I'm going to just copy this and I'll refresh the page and paste this back in.
So we're still listening for key press but we're going to work with the event object.
I'm going to add an argument here I'll call it event and this object will just contain all of the information
about the key press event.
So I'm just going to cancel that log event so you can see that and I hit enter.
And now if I type you can see that I'm constantly logging in event every time and this event tells me
that type is key press.
It gives me a time stamp gives me a few other things.
One of the important parts is this char code 106.
Also there's key code 1 or 6 and there's.
Which are right here and they all point to one or six.
There are some slight differences which I won't go into.
We're going to just stick with which which is the one that the J Querrey docs use officially as well
.
So what this refers to is the code of the key that was pressed.
So every key has its own code and it can show you here the javascript character codes.
There's a page here that will interactively show you.
So if I type I want to know what the letter see the corresponding code is.
At 67 if I want to check what enter is I need to hit the enter key which I'll do now.
And it tells me key code there at the end.
So that's one of the only ones that I know by heart because we do this a lot where we want something
to happen when you hit the enter key.
OK.
So let's remember that key code 13.
Go back to our code here and all we want to do is write an IF statement instead of our listener that
says if the user hit enter.
So if a event which is equal to 13 that means that the user hit enter and we'll just alert you hit enter
just like that and get rid of this for now because of that log.
So a user types any sort of key press instead of this input.
Then we have this event object that we now added to our callback which was already it was being passed
in.
Even if we left this out but we weren't capturing it in a variable.
So now we're capturing it in a variable called event.
You'll also see this called E sometimes but that can be called anything.
Remember it's totally up to you.
And then we're checking if the which property is 13 which is the enter key character code.
Hit enter.
And now let's go over to this and we'll type some non enter keys and we don't get those alerts.
We do get the consul out logs because we set up the original listener up here.
But now I'm I delete all that and I'll type some things and then I'll hit enter.
And now I get you hit enter.
So every time I type enter so I'll do it right now.
It tells me you hit enter.
All right.
So that's all I want to show about key press will be using this to make or to do list in just a few
videos from now.
And we'll also be checking if event out which is 13