JQuery-3. Event Post---keyboard events

KeyDown () and KeyUp () events for jquery keyboard events

The mouse has mousedown,mouseup and other events, which are based on the human gesture action decomposition of the 2 trigger behavior. The corresponding keyboard also has this kind of event, the user behavior decomposition into 2 actions, the keyboard press and let go, for such 2 kinds of action, jquery respectively provides corresponding KeyDown and KeyUp method to monitor

KeyDown event:

It is triggered when the user presses the letter key on the keyboard for the first time on an element. Very simple to use, consistent with basic event parameter handling, where use is not duplicated, list of methods used

Direct binding Event $elem.keydown (Handler (EventObject))//pass parameter $elem.keydown ([EventData], Handler (eventobject))//Manually trigger a bound event $ Elem.keydown ()

KeyUp event:

It is triggered when the user first let go of the key on the keyboard on an element. The use method is consistent with the KeyDown, but the trigger condition is the method.

Attention:

• KeyDown is triggered when the keyboard is pressed
• KeyUp is on the keyboard and it will trigger.
• Theoretically it can be bound to any element, but the Keydown/keyup event is only sent to the element with focus, in different browsers, the element that can get focus is slightly different, but the form element always gets the focus, so it is most appropriate for this event type form element.

<div class= "Left" >
<div class= "Aaron" > Monitor KeyDown Input:
<input class= "Target1" type= "text" value= "/><br/>
Press to display the value entered:<em></em>
</div>
<div class= "Aaron" > Monitor KeyUp Input:
<input class= "Target2" type= "text" value= "/><br/>
Let go. Displays the value of the input:<em></em>
</div>
</div>

<script type= "Text/javascript" >
Monitor keyboard keys
Gets the value entered
$ ('. Target1 '). KeyDown (function (e) {
$ ("Em:first"). Text (E.target.value)
});

Monitor keyboard keys
Gets the value entered
$ ('. Target2 '). KeyUp (function (e) {
$ ("Em:last"). Text (E.target.value)
});

</script>

jquery keyboard Event KeyPress () event

Binding the KeyDown event on the INPUT element will find a problem:

Each fetch is previously entered, and the current input is not obtained

KeyDown event trigger is not in the text box, if the text in the KeyDown event output text box, the text is triggered before the keyboard event, and the KeyUp event triggered when the entire keyboard event operation has been completed, obtained is triggered after the keyboard event text

When the browser captures the keyboard input, it also provides a keypress response, which is very similar to the KeyDown, please refer to the KeyDown section, specifically, the different points.

The main differences between KeyPress events and KeyDown and KeyUp

• Only single characters can be captured and key combinations cannot be captured
• Unable to respond to system function keys (e.g. delete,backspace)
• Numeric characters that do not differentiate between the keypad and the main keyboard

Word

KeyPress are primarily used to receive ANSI characters such as letters, numbers, and KeyDown and KeyUP event procedures can handle any keystroke that is not recognized by KeyPress. such as: function keys (F1-F12), edit keys, positioning keys, and any combination of these keys and keyboard shift keys.

<div class= "Left" >
<div class= "Aaron" > Monitor KeyPress Input:
<input class= "Target1" type= "text" value= "/><br/>
Input Chinese test, unable to display:<em></em>
</div>
</div>

<script type= "Text/javascript" >
Monitor keyboard keys
Gets the value entered
$ ('. Target1 '). KeyPress (function (e) {
$ ("em"). Text (E.target.value)
});



</script>

JQuery-3. Event Post---keyboard events