Keyboard Events of jQuery events (ctrl + Enter key submit form, etc)

Keyboard Events are used to process all users' keyboard hits, whether inside or outside the text input area. Keyboard Events have different scopes in different browsers. Generally, these keyboard events can be applied to elements such as Form, a tag, window, and document. The keyboard event can be triggered on all the elements that can obtain the intersection, and the elements that can obtain the focus can be understood in this way, when the Tab key is used, the elements that can be jumped to are the elements that can use the keyboard event (when the tabindex attribute value is not set for these elements, when the tabindex is set to a negative number, when the Tab key is used, the focus is not obtained ).

A keyboard event can pass a parameter event. In fact, all jQuery events can pass such a parameter. This event is an object and includes some attributes, when an event is triggered, you can use the event to obtain some event values. For example, you can use the event when using the keyboard. keyCode to obtain the ASCII code of the key. See the following

1: The keydown () event is the first keyboard event triggered when the keyboard is clicked. If you continue to hold down the key bit, the keydown event will continue.

Copy codeThe Code is as follows:
$ ('Input'). keydown (function (event ){
Alert (event. keyCode );
});

The values returned by the keyboard can be used to control these elements. For example, the upper and lower left keys are:, 40, respectively.
2: The keypress () event is similar to the keydown event, with only one exception. If you want to block the default behavior of the key, you must be a keypress event.

3: The keyup () event is the last event (after the keydown event, this event is triggered only once after the keyboard is released (because releasing the keyboard is not a constant state ).

Copy codeThe Code is as follows:
$ ('Input'). keyup (funciton (){
Alert ('keyup function is running !! ');
});

4: In jQuery, The keydown, keypress, and keyup events are executed in a certain order.

Copy codeThe Code is as follows:
$ ('Input'). keyup (function (){
Console. log ('keyup ');
});
$ ('Input'). keydown (function (){
Console. log ('keylow ');
});
$ ('Input'). keypress (function (){
Console. log ('keypress ');
});

The execution result is: keydown, keypress, keyup.
Alert is not used here because some events will be blocked during alert, and the keyup event will be blocked here. to experiment with this code, you can do it in Firefox, you need to install the firebug plug-in the browser. Install Firefox with confidence because it is an open-source browser. I believe in open-source software.

JQuery has three functions for handling Keyboard Events. The order of events is as follows:

Copy codeThe Code is as follows:
Keydown ();
Keyup ();
Keypress ();

Keydown ()

The keydown event is triggered when the keyboard is pressed. You can return false in the bound function to prevent browser default events from being triggered.

Keyup ()

The keyup event is triggered when the key is released, that is, the event after you press the keyboard.

Keypress ()

The keypress event is triggered when you press a key. We can understand it as pressing and lifting the same key.

How can we obtain whether I press the, Z, or press enter button?

A keyboard event can pass a parameter event. In fact, some jQuery event functions can pass such a parameter.

Copy codeThe Code is as follows:
$ ('Input'). keydown (function (event ){
Alert (event. keyCode );
});

In the above Code, event. keyCode can help us get the ascII code returned by the buttons we press. For example, the upper and lower keys are, and 39 respectively.

If we want to implement ctrl + Enter, ctrl + press Enter to submit the form

Copy codeThe Code is as follows:
$ (Document). keypress (function (e ){
If (e. ctrlKey & e. which = 13)
$ ("Form"). submit ();
})

Other reference information:

Prerequisites

1. number 0 key value 48 .. number 9 key value 57
2. a key value 97 .. z key value 122; A key value 65 .. Z key value 90
3. + key value 43;-key value 45;. Key Value 46; return 8; tab key value 9;
4. The event is global in ie and is a temporary object in firefox. parameters must be passed.

Copy codeThe Code is as follows:
*/
JQuery. extend ({
/* ===================================================== ============================================
Function Description: Obtain the key value.
Call method:
JQuery. getKeyNum (event );
*/
GetKeyNum: function (e ){
Var keynum;
If (window. event) {// IE
Keynum = event. keyCode;
}
Else if (e. which) {// Netscape/Firefox/Opera
Keynum = e. which;
}
Return keynum;
},
/* ===================================================== ============================================
Function Description: determines whether it is an integer. You can only enter numbers in the edit box.
Call method:
<Input type = "text" onkeypress = "return jQuery. isInt (event);"/>
Problem to be resolved:
The tab key in firefox does not work.
*/
IsInt: function (e ){
Var keynum = this. getKeyNum (e );
If (keynum> = 48 & keynum <= 57 | keynum = 8) {// you need to judge 8 for the backspace in firefox.
Return true;
}
Return false;
},
/* ===================================================== ============================================
Function Description: determines whether it is a decimal number. You can only enter a number in the edit box and only one decimal point.
Call method:
<Input type = "text" onkeypress = "return jQuery. isFloat (this, event);"/>
*/
IsFloat: function (txt, e ){
Var keynum = this. getKeyNum (e );
If (keynum = 46) {// enter the decimal point
If (txt. value. length = 0 ){
Return false;
} Else if (txt. value. indexOf ('.')> = 0 ){
Return false;
} Else {
Return true;
}
}
If (this. isInt (e )){
Return true;
}
Return false;
}
});