jQuery Tutorial #02 Keyboard and Form Events ( Keyup, Keydown, Keypress, Change, Focus and Blur)

Image Source

Repository

https://github.com/jquery/jquery

What Will I Learn?

I will learn the jquery events part 2 , in this part we will take the keyboard and form events with examples .

• How to use the keyup event.
• How to use the keydown and keypress events, what's the difference between them.
• How to use the change event.
• What's the focus and blur events and how to use them.

Requirements

• Knowledge about HTML5 and CSS3
• Knowledge about jQuery
• A text editor like notpad ++ 

Difficulty

• Basic

Description

 In this tutorial we will continue the jQuery events , we will take the keyboard and form events.

- I created a table to organize the tutorial and to clarify the  points more, in the table I have 5 columns , each one contains an event

1- Keyup Event :

The keyup event, is triggered when the user releases a key. It is only triggered once per keypress.

Before anything you must select the element by the $('element') selector , after that we apply the .keyup event . 

We pass a function as parameter for this method and when you press a key, the system will execute the //something here , it will execute the content of the function. 

 $('element').keyup(function () { // something here })); 

This is an example from my code to understand when we use this event : 

 /********** KeyUp Event *********/

    $('.titleUp').keyup(function () {

        $('.titlleUp').html($(this).val());

    });

    $('.textaUp').keyup(function () {

        $('.textUp').html($(this).val());

    });

When I type something in the input it will take the value and show what I have written in a heading and paragraph , this is the result : 

2- Keydown Event :

The keydown event is triggered as soon as a user presses a key down. This event doesn't require the user to finish the keypress in order to be triggered.

To use the keydown event we follow the same steps of keyup event , we select the element then the keydown method and we pass a function ..

$('element').keydown(function () { // something here })); 

I will apply the same example but let's see the result by the keydown event : 

/********** Keydown Event *********/

    $('.titledown').keydown(function () {

        $('.titlledown').html($(this).val());

        alert('the key was pressed');

    });

    $('.textadown').keydown(function () {

        $('.textdown').html($(this).val());

        alert('the key was pressed');

    });

So I will take the value of the input and show the result in a heading and paragraph as the first example : 

Whenever I press the key the alert will appear , but the keydown take the value without the final character, and this is the difference between the keydown and keyup events .

3- Keypress Event :

 Keypress is very much like the keydown event, except it isn't triggered for modifier keys like 'shift', 'esc', and 'delete'.

To use the keypress event we follow the same steps of keyup and keydown event , we select the element then the keydown method and we pass a function ..

$('element').keydown(function () { // something here })); 

I will press the delete key to delete the value of the input to try the keys ..

When I pressed the delete nothing was changed , the keypress doesn't work with the delete , esc ..etc.

My code : 

/********** Keypress Event *********/

    $('.titlepress').keypress(function () {

        $('.titllepress').html($(this).val());

        alert('the key was pressed');

    });

    $('.textapress').keypress(function () {

        $('.textpress').html($(this).val());

        alert('the key was pressed');

    });

4- Change Event :

This event is applied when there is a change in the selected item and a change in its value, the very helpful example is the select box , because it contains many items each one has a value , when we change the selected item the value will be changed also and the event will work.

To use the change event let's firstly select the element then the change method and we pass a function ..

$('element').change(function () { // something here })); 

If I type 2 and I select the pant this is the result : 

It will give us the result 800 usd because the value of the pant is 400 usd multiply by 2 it will be 800 , when we change the pant to boot exp it will change the value .

My code : 

/********** Change Event *********/

    $('.market').change(function () {

        var selectV = parseInt($(this).val(), 10),

            inputV = parseInt($('.nbr').val(), 10),

            res = selectV * inputV;

        $('.result').html(res + " USD");

    });

5- Focus Event :

The focus event works when the inpus is focused, in this example we will change the width of the width , by default is 50px , by the event we will change the width with animation to 150px.

To use the focus event let's firstly select the element then the focus method and we pass a function ..

$('element').focus(function () { // something here })); 

When we click on the input when we focus the input this is the result : 

The width of the input will be 150px when we focus in the input , the focus event works correctly and this is my code : 

/******* Focus Event ****/

    $('.focusInput').focus(function () {

        $(this).animate({

            width: '150px'

        }, 600);

    });

6- Blur Event :

The blur event works when we leave the input, we will continue the same example when we focus in the width will be 150px , and when we leave the input the width will return to 50px.

To use the blur event let's firstly select the element then the blur method and we pass a function ..

$('element').blur(function () { // something here })); 

Inside the function passed by parameter , I changed the width by animation to 50px and this is my code : 

/******* Blur Event ****/

    $('.focusInput').blur(function () {

        $(this).animate({

            width: '50px'

        }, 600);

    });

Video Tutorial

Curriculum

•  Create a slideshow using HTML5 , CSS3 and jQuery
•  jQuery Tutorial #01 Mouse Events (Click , dblClick, mouseEnter, mouseLeave, mouseOver and Hover)
•  Create a loading page using HTML5 , CSS3 and jQuery

Proof of Work Done

https://github.com/alexendre-maxim/jQuery-Events/tree/master/jQuery%20Events%202