jquery Keyboard Event Ctrl+enter Enter Submit form

Source: Internet
Author: User

Sharing some examples of jquery keyboard events, the personal feeling is good, a lot of time to study.

Keyboard events handle all users ' keystrokes on the keyboard, whether inside or outside the text input area. Keyboard events are not the same in different browsers, and usually this keyboard event can be used on elements such as form elements, a tag element, window, document, and so on. The elements that can trigger the keyboard event on all the elements that can get the intersection point can understand that the element that can be jumped to when using the TAB key is the meta that can use the keyboard event (without setting the TabIndex property value for these elements). When the TabIndex is set to a negative number, the focus is not given when the TAB key is used.

Keyboard events can pass a parameter event, in fact all jquery events can be passed such a parameter, the event is an object, which includes some properties, in the event of triggering events can be used to obtain some of the value of the event, For example, when using the keyboard, you can use Event.keycode to get the ASCII code value of the pressed key. See below
The 1:keydown () event is the first keyboard event triggered when the keyboard hits, and if the user continues to hold down the key, the KeyDown event continues.

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

The values returned by the keyboard can be used to achieve more control over these elements, such as the upper and Lower keys, 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 the KeyPress event.
The 3:keyup () event is the last occurrence (after the KeyDown event) and does not want to keydown the event, which is triggered only once when the keyboard is released (because releasing the keyboard is not a continuous state).

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

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

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

The execution results are: KeyDown, KeyPress, KeyUp.

Do not use alert here is because in the alert will prevent some events, here will prevent the occurrence of KeyUp events, to experiment with this code, can be done under Firefox, you need to install Firebug this plugin in the browser. Install it with confidence 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:
KeyDown ();
KeyUp ();
KeyPress ();
KeyDown ()
The KeyDown event is triggered when the keyboard is pressed and can return false in the bound function to prevent the browser from triggering the default event.
KeyUp ()
The KeyUp event is triggered when the key is released, which is the event you press the keyboard up
KeyPress ()
The KeyPress event is triggered when the button is tapped, and we can understand that pressing and lifting the same button
How can we get the A or Z or the return button I pressed?
Keyboard events can pass a parameter event, in fact, some jquery event function can pass such a parameter

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

The above code, Event.keycode can help us to get to what we press the button, he returned the ASCII code, such as the next key, such as 38,40,37,39

If you want to implement Ctrl+enter is CTRL + ENTER submit Form

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

Other reference information:

Pre-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

*/Jquery.extend ({/*=========================================================================== function Description: Gets the value of the key call method: Jquery.getkeynum (event); */Getkeynum:function(e) {varKeynum;if(window.event) {//IEKeynum =Event.keycode;} Else if(E.which) {//Netscape/firefox/operaKeynum =E.which;} returnKeynum;},/*=========================================================================== Function Description: Determine whether an integer, limit the edit box can only enter a number call method: <input type= "text" onkeypress= "Return Jquery.isint" (event), "/> To solve the problem: Firefox Tab key does not work. */Isint:function(e) {varKeynum = This. Getkeynum (e);if(Keynum >= && keynum <= | | keynum = 8) {//Firefox needs to be judged by 8return true; } Www.jbxue.comreturn false; }, /*=========================================================================== Function Description: Determine whether it is a decimal, limit the edit box can only enter a number, Only one decimal points can be entered. Calling method: <input type= "text" onkeypress= "return Jquery.isfloat (this,event);"/>*/isfloat:function(txt,e) {varKeynum = This. Getkeynum (e);if(Keynum = = 46) {//Enter a decimal pointif(Txt.value.length = = 0){ return false; }Else if(Txt.value.indexOf ('. ') >= 0){ return false; }Else{ return true; } } www.jbxue.comif( This. Isint (e)) { return true; } return false; } });

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.