Tutorial Keyboard, Form Events

In this tutorial, we will discuss more about events. I will show you some form and keyboard events. For that purpose, I have created an input field in my HTML code.

<input type="text" placeholder="Enter Text">

Here is the complete code.

As you can see, I have use the “blur” event and it will perform the functionality when you click somewhere else. There are two main events on forms.
⦁ Focus
⦁ Blur

When your cursor is blinking inside a field then that field is in focus and after that when your cursor is on somewhere else then that focused input field goes in blur state. Focus and blur are opposite.

Here’s the code for focus event.

focusin event is very similar to focus but it is distinct in a way that it can detect the focus event on parent elements. Similarly, focusout and blur have the same differences.

Above shown above, “keypress” is a keyboard event and as the name shows, it is triggered when a key on keyboard is pressed. A very similar event to “keypress” is “keydown”. The difference between them is some special keys like shift, delete triggers the “keydown” event but did not effect the keypress event.

When you type something using keyboard two things happens:

⦁ A key is pressed.
⦁ That pressed key is released.

Therefore, when you want to do something when the key is pressed, you have to use “keydown” event and when you want to perform action when a key is released you have “keyup” event available for that purpose in JQuery.

select event is when some text in the input field is selected. It will perform the given functionality when something in the input field is selected using mouse or special keyboard keys for example ctrl+a.

Above given picture is the code for select event.

And that’s the output. As you can see when I selected some text in the input field, the JQuery function is triggered and the background of the input field is changed to yellow.

Mouse Events

As I have told you in first tutorial. Before learning JQuery, you must have knowledge of HTML, CSS, and JavaScript. If you have learned JavaScript before you must have some knowledge of events. Events are used to perform an action when something happens for example mouse click, key press.

Here are some of the Events:

click() is use to detect the single click of mouse on a HTML element.
dblclick() is use to detect the double click of mouse on a HTML element.
You have seen the example of click event in the previous class.

This is the example of mouse-enter event. The function will be executed when your pointer will enter in the region of the button. You do not need to click anything. mouseleave works when the pointer leaves the specified area.

mouseup event detect that when somebody press and leave the mouse button. This event is for both mouse buttons. The difference between click and mouseup event is that mouseup event work for all mouse buttons while click event works only for left click. mousedown event triggers the function when somebody presses any of the mouse key and it did not wait for the key to be released.

---

Posted on Utopian.io - Rewarding Open Source Contributors

---