jQuery Keyboard events

Hello guys. You are welcome to our series jQuery. Last segment that we had, in that we learnt about mouse events. Let’s move forward with today’s segment. Today’s segment is on jQuery keyboard events. We will be covering different events in this module. In the last segment we even saw how many events that we can handle through jQuery. In which we completed mouse events and now we will be covering ‘keyboard events’ If you have completed our LearnVern’s JavaScript course then you must have gotten some idea regarding the keyboard events and how many different types of events are covered in it. 

For example, I have a keyboard. We press the different keys of the keyboard. Key press is one event, pressing the key of the keyboard. When the key goes down then it is a key down event and we release the pressed key then we have a key up event. Means, we have at least three elements available related to a single key.

Let's move forward with our segment. In this slide the three events that I said are the three methods available in jQuery. With the help of these three events we can perform the functions, actions that we need by inserting functions and can write the keyboard events. So, we will be seeing the three events that we have in this slide which are key down, key press, key up will see them one by one.

Firstly, we will start with the key down event. Just as I said earlier, I have this keyboard and I am having different keys on the keyboard. So, if I press the key then the very first event that fires is key going down, meaning key going down that is why it is also called the key down. We can determine, check and associate which action to perform, what changes we have to dynamically add and our web page make with the help of this key down method, key down event.

Key down, means all the three events function or the syntax of all the key down events is the same as for mouse related events. Here also, in syntax we will add the selector and then we have to write the key down. Make sure while writing the key down, you will not keep D capital but you will keep it small. Okay, now here is the key down.

Here, in key down the function which is written inside parenthesis is stated as an optional function. If you don’t write functions then, nothing is going to change. Because this syntax is correct. None of the errors will be thrown. But, as I have said in previous segments, if we don’t write the function then there is no action attached to key down. So, to attach or perform the action, we have to write a function mandatorily. So, along with the key down, though the function is optional, we should write it.

So, we will move forward with these examples of functions. We have taken a basic example when I do a key down then there should be some color related changes seen. Basically, it is not necessary for the key down events to be used on input form controls. Key down can be applied to any element. Meaning you can apply it on DIV, form’s input controls, etc. we can perform this on all those elements which you take. 

So, currently the example we will see of the key down, in that we will take input. Inside input when we press something key down, then what happens?

So, let’s say I open sublime text... In sublime , let’s take plain text as HTML….This is our key down example. So, key down…. Now, we will add the jQuery library here. After adding the library we will add script so that our code related to jQuery would come here. And in style we will add the thing which we add in all the program, in the body, add text-align…., center.

Here…, “example key down”. So, this is our heading. Now, basically, we fire the events on the button click normally but because this program is related to key down, we won’t be needing the use of buttons. We can simply perform using any input control.

So, let’s say, I take some input like this. I will take the type as text. There is no need for a name. Here, I will also add one label stating “enter… something”. Okay, so now we have input and we will enter something into it. So, let’s say, I save this program…. This is key down related so we will give it the same name as key down.

Now, let’s run this program…. First of all,… this is our program. Here, as you can see this is our heading as an example key down and here ‘enter something’. For now, we are not entering anything. If at all we enter then nothing is going to show up.

So, when I type something in this input control, then my key down event should get fired. For that, what we will do is, in our script, first of all it will be dollar…, document, dot, ready,…. function. This is our fix line which will get fired when the document is ready. Here, inside input when we do key down there should be something executed. That we will write here. So that would be a dollar…, input, dot…, key down. If I keep the statement like this in the input key down, it is valid for now but it won’t perform any action.

For performing actions we have to write functions... So, this is my function. Or, when I do a key down, I want the color of the field to change when I am typing something at that time and when I release the key, it should get back to the way it was.

So, first we will take a key down example. So, it will be this way. Dollar.., input, dot, …CSS, background-color… comma let’s take some light color. Let’s take light-green for example. Now, if I save this. Reload. Now I have come here. Just as I press the key, my background color should change. So, just as I type Y the color changes.

Now, I am pressing randomly E, J, C, and O.  Once my color is changed it is not reverting back like it was before. Because we have done the key down event. So, if I reload this program, it has become like before. So, now, I will type and you can see the color has changed. So, my event got fired after triggering the first key.

If I want to stop it, when I turn the key down and then release its meaning, my color which was light-green would become normal color, for that to happen I have to write an alternative of the key down. So the alternative of key down is key up. Means, the key which has gone down would come up and some action will be performed. In that case what will I do? So, in this program only the thing which I have written for key down, same thing I write for key up then my light green color would change to white. How? So, first we will go to the slide. This is our key down you have seen. How we executed examples on key down.

Next, is our key press we will see in the last. Now we will see the key up. The meaning of key up is that whichever key I have pressed and had gone down, when I release that key then my key up event gets executed. Meaning, releasing the one which has gone down. Not only the one which is gone down but we can write on any of the keys. But, if the key won’t go down, then how will it come up? so, that is why whichever key comes up then this action will be executed.

It has the same syntax just like key down that same syntax is for up. U is small. We have to write a function related to this. Function is optional but, as I previously said, we will write the function or else the action cannot be performed. In the example, you can see we are changing a certain background-color on up. We will take its example in such a way, the program which we have taken currently, in that, when the key goes down, our color is changing. Meaning just the way the color is changing when it is going down, same way, I want its color to come back when done up, means would be white.

So, what I will write here is, in this program only where I have written key down, I will write key up. In this only example, key down and key up. So, here we will add one more thing with the key down. Dollar,… input…, key up, back-ground color, white. Means, when it is pressed, the key goes down then the color would be light-green but when the key would be up then, I have to give it color as white. So, I will save it.

We will run this program. Here, I will write the T release…. When I pressed the key it was green. Now, I will type something, for example, ( 5 seconds pause, typing) whenever I am pressing the key, at that time it turns green in color and whenever I release the keys its color changes. Now, I am pressing the escape key. So, when I pressed the escape key, it turned green. I have pressed the key and when I release it, it turns white.

Again, I pressed the escape key and the key down action was performed, so it’s color is green and when I up it, the color changes to white. Down, up, down, up, down, up. It is happening like this. So, whenever I key down, action will be performed and green color will come. I will key up, action would be released and the color would change to white. It's like”…. this is learnVern”. As you can see I am typing anything and its color is changing and then turning white. Our example is done with key up and key down. Whenever we go down and up it, action will be performed.

Now, comes our key mode related last event called key press. Key press is really important. If I give you an example of “key press''. Let us first check what key press is? When I do a key down from the keyboard, after that, I press it after it is down, keeping it pressed. The event that gets fired at that time is called key press.

Key down is going down the key. Key up meaning releasing of the key. But, key press means pressing the key. So, when I keep the key pressed and I want to perform some action at that time then I will use this key press event to perform the action. How will we do that?

Here is the syntax of it, it is the same as key down and key up. P is small in the key press. Function is optional but, we will write it because we want to perform the action. Here the key press will come.
The example of key press is, if you have seen lots of sites. In them, there is a certain text area. In the text area, there is a limitation that you can write only these many words.

If you give some exams online, and want to write an essay. If it is written there, write an essay in five hundred words. Then, we can see a word count below that text area. Word count indicates how many characters are still remaining. Meaning, if you have given five hundred characters to write in a text field and as you press the keys one, two, three, the count below starts to decrease. The count goes down from five hundred, four ninety-nine, four ninety-eight and so on.

What is this? This indicates how many letters you can add inside. So, this counting, pressing of keys and then decreasing of the count, again pressed the key and again count got decreased. This calculation, this dynamic calculation that is happening, how is it actually happening? That happens with our key press.

The example which I had showed you earlier, we will do that example only. Here, you can see the example in which with the help of a key press, we will check how many letters we typed in the input field. Means, I will give an input field. In that, I need limited length. If I want to add a name in my input field. But, the name should not be greater than ten characters then I will check. I want to show the user at every moment, how many characters are left. So how will we do that?

So, let's say I open sublime text. Sorry, our sublime text is already opened. I will copy this program and paste here but I will remove the things. Like, will keep the document, dot, and ready. Here it will come,…key press, ( 5 seconds pause typing )key press…. We will save this program. Key press. We will run the program. So, this is our key press.

Here, instead of writing something, enter your… name. Okay, so, we will add the name here but along with that, down here, we will add span. In the span, for the time being I am keeping it zero. Okay, but, when I type something here then my value of span should be changed. Dynamically should be changed. For that, what I will do is, I will have to take the reference of input. How many things were added in input? So, dollar…., input, dot, ….key press. Whenever I press the key in the input then this event will get fired.

So, here I have to write a function. This function will return how many characters have gone in the key press. Or else we can do like this, how many characters were typed in the input field. Let’s say I will write here dollar…, I have to show it over span about how many characters are typed so, span, dot…. Whenever we want to show the value or dynamically change it, what do we use? We use the text method of HTML. Here, I will take a variable and I will increase the variable.

Whenever I press the key, then my variable should get increased. Means, I will take in the document, var…i equal to zero. And here, inside the text, is equal to i plus one. Means, whenever I press the key, then my value of ‘i’ will increase and will be seen in span too.

Let’s first run this program. So, here you can see “Enter your name” and here it is written zero. I will add my name here. So, you can see, it is showing four here. Whenever I was pressing the key, my count was increasing.

So, here, we can also write… BR( 6 seconds pause typing) . Okay. So, It’s like, This is an…. input field. So, whichever key I had pressed on this input key was seen in the character count. Meaning, I wrote twenty five characters that is why I can see only twenty five including space, space is also getting counted. Now, if I remove it, it is not going back because we have written the number of keys that were pressed. Let’s empty this, still it is not showing. Means here, length is not getting calculated. So, this program that we have, we can extend this as well. Till where can we extend it?

If I press a key then length should be shown here but, if I remove it, it should go off and this should be zero again. We will do a little variation in this program only. Our character count is getting decreased, this should also be seen. So, for that what we will do is, so, here, instead of I equal to I plus one we will do, let’s say, I want to add only a maximum of ten values in my input field. So, like max length…, ten. Okay, means, my name should not be greater than ten.

So, here I want to show how many remaining characters there are, so…, remaining characters. Here, whichever is our max length, we will add, that is ten. Minus, whichever input field that we have, dot…, val. meaning its value. Dot, length…. Now what will happen to my input field is whenever I press the input key, the numbers will be getting added. Meaning, its length will be found. How lesser it is by ten will be shown here. Meaning, how many characters did we add? And, how many characters are remaining? Will be shown here.

I will save it and reload it. So, now you see, enter your name. So, I will write, this is my. As you can see, it stopped after my. Again, this is my name, it stopped after giving space. I will give another name like Joel. Okay.

So, here you can see, the remaining characters are shown whenever I type. But, there is one problem which you can see, when I type I can see the remaining characters. But, when I click backspace, it doesn’t work. It's because the backspace key is not detected in the key press. It is only and only detected in key up. So, if I want to type something, delete something, there should be an update in count. So for that what should I do? I have to do a key up. I have done the key up. Saved it. I will reload it. Now you see, J, O, E, L space C, H, R, I. okay.  Now, when I go back, my backspace key is also getting detected.

So here we learnt one thing, the backspace that we have does not detect key press or backspace does not support key press, rest of the keys do. So, if you want to write this program live, on the basis of requirement you have to write or you want to find out the remaining characters, you will not use the key press because keypress does not detect backspace, keyup does. So here, the program that I had taught you for key press, in that what you will replace is, that is to do key up. This was said intentionally so that we can learn the example of key press and also limitations of key press that is which is the key that does not support key press. So that is our backspace. If I write this program by using the key press again then it’s like, okay. So this program shows the remaining characters.

So these were three methods of today’s segments. We saw all three methods key down, key up and key press. We saw a live example for key press where we can check how many characters are remaining in the input field.

So guys, the three practical’s that we did today, I request you all to practice it and perform it. If there is any doubt or question in today’s segment or there is any difficulty, not able to understand or you are facing difficulties performing practical. Then you can inform us that on forums dot Learn Vern dot com. We will revert you with all the solutions to the questions. Discussion to be added

Next segment that we have is of jQuery Form related events. So, meet you in the next segment. Thank you.