jquery Event Keyboard event (Ctrl+enter Return key submission form, etc.) _jquery

Keyboard events handle the keystrokes of all users, whether inside or outside the text entry area. Keyboard events work differently in different browsers, and typically this keyboard event can be used on elements such as form elements, a tag element, window, document, and so on. In all the elements that can get the intersection point, the keyboard event can be triggered, and the element that can get the focus can be understood that the elements that can be jumped to when using the TAB key are those that can use keyboard events (without setting the TabIndex property value for these elements, When TabIndex is set to a negative number, the focus is not given when you use the TAB key.

Keyboard events can pass a parameter event, in fact, all jquery events can pass such a parameter, this event is an object, which includes some attributes, in the event to trigger events to get some of the value of the event, For example, when using the keyboard, you can use Event.keycode to get the value of the ASCII code of the pressed key. See below

The 1:keydown () event is the first keyboard event that is triggered when the keyboard clicks, and the KeyDown event continues if the user continues to hold the key.

Copy Code code as follows:

$ (' input '). KeyDown (function (event) {
alert (Event.keycode);
});

The value returned through the keyboard can be more control of these elements, such as the next key around, respectively: 38,40,37,39.
2:keypress () events and KeyDown are similar, with only one exception, if you need to block the default behavior of keystrokes, you must be yo on keypress events.

The 3:keyup () event is the last event that occurred (after the KeyDown event) and does not want to keydown the event, which is only triggered once when the keyboard is released (since releasing the keyboard is not a persistent state).

Copy Code code as follows:

$ (' input '). KeyUp (Funciton () {
Alert (' KeyUp function is running!! ');
});

4: In jquery Keydown,keypress,keyup events are performed in a certain order.

Copy Code code as follows:

$ (' input '). KeyUp (function () {
Console.log (' KeyUp ');
});
$ (' input '). KeyDown (function () {
Console.log (' KeyDown ');
});
$ (' input '). KeyPress (function () {
Console.log (' keypress ');
});

The results are: KeyDown, KeyPress, KeyUp.
The reason for not using alert is because it prevents some events from happening in alert, where it prevents the KeyUp event from happening, and to experiment with this code, it can be done under Firefox, and it needs to be installed on the browser firebug the plugin. Ease of installation, because Firefox is an open source browser. Believe in open source software.

jquery handles keyboard events with three functions, depending on the order in which the events occur:

Copy Code code as follows:

KeyDown ();
KeyUp ();
KeyPress ();

KeyDown ()

The KeyDown event fires when the keyboard presses, and can return false in the bound function Central Europe to prevent the browser from triggering the default event.

KeyUp ()

The KeyUp event triggers when the key is released, which is what happens when you press the keyboard

KeyPress ()

The KeyPress event triggers when the keystroke is hit, which we can understand to press and lift the same key

How do we get the "a" or "Z" or "return" button that I pressed?

Keyboard events can pass a parameter event, in fact, some jquery event functions can pass such a parameter

Copy Code code as follows:

$ (' input '). KeyDown (function (event) {
alert (Event.keycode);
});

In the code above, Event.keycode can help us to get what button we pressed, and he returns ASCII code, like the next key around, 38,40,37,39

If we're going to implement Ctrl+enter, CTRL + RETURN submit the form

Copy Code code as follows:

$ (document). KeyPress (function (e) {
if (e.ctrlkey && E.which = 13)
$ ("form"). Submit ();
})

Other reference information:

Preliminary knowledge

1. number 0 Key value 48. Number 9 Key value 57
2.a key value 97. Z Key value 122; A key value of 65. Z-Key Value 90
3.+ key value 43;-key value 45;. Key value 46; Backspace 8;tab key value 9;
4.event in IE is global, in Firefox is a temporary object, need to pass parameters

Copy Code code as follows:

*/
Jquery.extend ({
/*===========================================================================
Function Description: Get the value of the key
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: To determine whether an integer, restricted edit box can only enter a number
Call Method:
<input type= "text" onkeypress= "return Jquery.isint (event);"/>
Pending issues:
Firefox doesn't work with the TAB key.
*/
Isint:function (e) {
var keynum = This.getkeynum (e);
if (keynum >= && keynum <= | | keynum = 8) {//firefox down to judge 8
return true;
}
return false;
},
/*===========================================================================
Function Description: To determine whether a decimal, restricted edit box can only enter a number, you can enter a decimal points.
Call Method:
<input type= "text" onkeypress= "return Jquery.isfloat (this,event);"/>
*/
Isfloat:function (txt,e) {
var keynum = This.getkeynum (e);
if (Keynum = = 46) {//Enter 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;
}
});