Keyboard events of jQuery events (ctrl Enter key to submit the form, etc.)_jquery

Keyboard events handle all user keystrokes, whether inside or outside the text input area. The scope of keyboard events is different in different browsers. Generally, this kind of keyboard events can act on elements such as Form elements, a tag elements, window, and document. Keyboard events can be triggered on all elements that can obtain intersection points. Elements that can obtain focus can be understood in this way. Elements that can be jumped to when using the Tab key are elements that can use keyboard events (if tabindex is not set for these elements) In the case of attribute values, when tabindex is set to a negative number, focus will not be obtained when using 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 properties. When the event is triggered, you can use the event to get some information about the event. For example, when using the keyboard, you can use event.keyCode to obtain the ASCII code value of the pressed key. See below

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

Copy code The code is as follows:

$('input').keydown(function(event ){
          alert(event.keyCode); 
          });
More control over these elements can be achieved through the values ​​returned by the keyboard, such as the up, down, left and right keys, respectively: 38, 40, 37, 39.

2: The keypress() event is similar to keydown, with one exception. If you need to prevent the default behavior of the key, you must use the keypress event.

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

Copy code The code is as follows: $('input').keyup(funciton() {

         alert('keyup function is running!!');

          });



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

Copy code The code is as follows: $('input').keyup(function() {

            console.log('keyup');

          }); } );
The execution results are: keydown, keypress, keyup.
The reason why alert is not used here is because some events will be prevented from occurring during alert. Here, the keyup event will be prevented from occurring. If you want to experiment with this code , can be performed under Firefox, and the firebug plug-in needs to be installed on the browser. Install with confidence because Firefox is an open source browser. Trust open source software.

jQuery has three functions to handle keyboard events. According to the order in which the events occur, they are:





Copy code

The code is as follows:

keydown();

keyup();

keypress();

keydown()

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

keyup()

The keyup event will be triggered when the key is released, that is, the event after you press the keyboard and get up

keypress()

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

How can we get whether I pressed the A, Z or Enter button?

Keyboard events can pass a parameter event. In fact, some jQuery event functions can pass such a parameter

Copy code The code is as follows:

$('input').keydown(function(event ){
alert(event.keyCode);
});

In the above code, event.keyCode can help us get what key we pressed. It returns the ascII code, such as the up, down, left and right keys, which are 38, 40, 37, 39 respectively

If we want to implement ctrl Enter, it is ctrl Enter to submit the form

Copy code The code is 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 65.. Z key value 90
3. Key value 43;-Key value 45;.Key value 46;Backspace 8;Tab key value 9;
4.event is global in IE, and is a temporary object in Firefox, and parameters need to be passed

Copy code The code is as follows:

*/
jQuery.extend({
/*================================================ ============================
Function description: Get the value of the key
Calling 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: Determine whether it is an integer, restrict the edit box to only input numbers
Calling method:

Problems to be solved:
The tab key does not work in firefox.
*/
isInt. :function(e){
var keynum = this.getKeyNum(e);
if(keynum >= 48 && keynum <= 57 || keynum == 8){//Backspace required in firefox Judgment 8
return true;
}
return false;
},
/*====================== ================================================== ===
Function description: Determine whether it is a decimal. Limit the edit box to only numbers and one decimal point.
Calling method:

*/
isFloat:function(txt,e){
var keynum = this.getKeyNum(e);
if(keynum == 46){//Input 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;
}
});