JQuery event keyboard event of CTRL +Enter key submission form

  • 2020-03-30 02:55:49
  • OfStack

Keyboard events handle all user keystrokes, whether inside or outside the text input area. The scope of keyboard events varies from browser to browser. Typically, this type of keyboard event can be applied to elements such as Form elements, a tag elements, window, and document. On all elements of intersection point can be obtained can be triggered keyboard events, can the focused element can understand it, when using the Tab key to jump element is the yuan can use keyboard events (without setting tabindex attribute values for these elements, when the tabindex is set to a negative number, won't get focus when using the Tab key).

      Keyboard events can pass a parameter to the event, in fact all jQuery event can be passed so a parameter, this event is an object, which include some of the properties, at the time of triggering events can obtain some value about the event by event, such as when using the keyboard can use event. The keyCode to get the press the key of the ASCII value. 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 continues.


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

          More control over these elements can be achieved with the values returned by the keyboard, such as the left and right keys, the top and bottom keys: 38,40,37,39.
Keypress () event is similar to keydown, with one exception. If you want to block the default behavior of a key, you must be keypress event.

3: the keyup() event is the last event to happen (after the keydown event), not the keydown 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 and 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 result is: keydown,keypress,keyup.
          I don't use alert here because alert prevents some events from happening, in this case keyup. To experiment with this code, you can do it under Firefox, and you need to install firebug in your browser. Don't worry, because Firefox is an open source browser. Believe in open source software.

JQuery has three functions for handling keyboard events, according to the sequence of events:


keydown();
keyup();
keypress();

Keydown ()

The keydown event is triggered when the keyboard is pressed, and you can return false in the bound function to prevent triggering the browser's default event.

Keyup ()

The keyup event is triggered when the key is released, which is when you press the keyboard to get up

Keypress ()

The keypress event is triggered when a key is hit, which can be interpreted as pushing down and lifting the same key

  How do we get whether I'm hitting A or Z or the enter button?

Keyboard events can pass a parameter called event, and in fact, some jQuery event functions can pass such a parameter


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

The event.keycode in the above code will help us to get what key we pressed, and it will return ascII code, such as up, down, left and right keys, 38,40,37,39, right

If we want to CTRL +Enter that's CTRL +Enter and submit the form


$(document).keypress(function(e) {
if (e.ctrlKey && e.which == 13)
$("form").submit();
})

Other reference information:

Preliminary knowledge

1. The number 0 key value 48.. The number 9 has a key value of 57
2. A key value 97.. 122 z key value; A key value 65.. 90 Z key values
3. 43 + key values; - the key value of 45; 46. Key value; Backspace 8; The TAB key value 9;
4. Event is global in ie, but temporary in firefox, and needs to pass parameters


*/ 
jQuery.extend({ 
 
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, limit the edit box can only enter Numbers  
 Call method:  
<input type="text" onkeypress="return jQuery.isInt(event);" /> 
 Problems to be solved:  
firefox Under the tab The bond doesn't work.  
*/ 
isInt:function(e){ 
var keynum = this.getKeyNum(e); 
if(keynum >= 48 && keynum <= 57 || keynum == 8){//Firefox backspace needs to be judged 8
return true; 
} 
return false; 
}, 
/*=========================================================================== 
 Function description: determine whether it is a decimal, limit the edit box can only enter a number, can only enter a 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){//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; 
} 
});


Related articles: