Section 58 KeyboardEvent Keyboard Events and TextEvent Text Events - Wang Wei

This content is the courseware of "Javascript Video for Web Front-end Development", please cooperate with the "Javascript" video course of Master Brother.

DOM2-level events originally specified keyboard events, but removed the corresponding content before finalization; as a result, support for keyboard events mainly followed the DOM0 level, and DOM3 level established specifications for keyboard events, but modern browsers have not yet fully implemented;

KeyboardEvent Class:

Describes the user's interaction with the keyboard, providing key details; it inherits from the UIEvent class;

It uses 3 keyboard events to identify different types of keyboard activity:

keydown: triggered when any key on the keyboard is pressed, and if you hold it down, it will be triggered repeatedly;

keypress: Triggered when a character key is pressed on the keyboard, and if you press and hold it, it will be triggered repeatedly; pressing Esc will also trigger this event;

keyup: Triggered when releasing a key on the keyboard;

Keydown and keyup are low-level keyboard events that fire whenever any key is pressed or released; keypress is a high-level keyboard event that triggers only when a key of a printable character is pressed;

Although all elements support the above 3 events, they are only most commonly used when entering text through text boxes;

When the user presses the character key on the keyboard, the triggering event sequence is: keydown – > keypress – > keyup; where keydown, keypress are triggered before the text box changes; and keyup is triggered after the text box has changed;

If the user presses a character key and does not put it, the keydown and keypress events will be triggered repeatedly, and the user will directly release the key until the user releases it;

If a non-character key is pressed, the order of the trigger event is: keydown – > keyup; if the non-character key is pressed and held, the keydown event will be triggered repeatedly until the user releases, at which time the keyup event will be triggered;

Keyboard events also support auxiliary keys, and there are shiftKey, ctrlKey, altKey and metaKey properties in their event objects, and IE does not support metaKey;

Event object properties:

Keycode keyCode attribute: The keys on the keyboard will correspond to a Unicode value, which is the keyCode keycode; this property has been deprecated by DOM3, but all browsers support it;

For keydown and keyup events, all keys can be triggered when pressed, so they focus on the key, and the keyCode of the event object returns the key code, corresponding to a specific physical key on the keyboard; for the character key, it has nothing to do with its case, such as: the values of the letters A and a are 65;

Key Key code

Backspace 8

Tab 9

Enter 13

Shift 16

Control (Ctrl) 17

Alt18

Pause/Break 19

Caps Lock 20

Exit (Esc) 27

Space 32

Page Up 33

Page Down 34

End 35

Starts with Home 36

Left Arrow 37

Up Arrow 38

Right Arrow 39

Down Arrow 40

Insert (Ins) 45

Delete (Del)46

Letter keys (A-Z) 65-90

Left Windows key 91

Right Windows key 92

Context menu key 93

Numeric keypad 0-996-105

Numeric keypad +107

Numeric keypad - and large keyboard -109

Numeric keypad.110

Numeric keypad/111

F1-F12112-123

Num Lock 144

Scroll Lock 145

The semicolon FF is 59 and the others are 186

Equal to (=) 187

Less than (or comma) 188

Minus (-) 189

Greater than (or period) 190

Forward slash 191

Deep note (') 192

Equal to 61

219 in left square brackets

Backslash 220

Right square bracket 221

Single quote 222

Fn255

Note: In Firefox and earlier versions of Opear, the value of the semicolon key is 59, which is the encoding of the semicolon in ASCII; however, other browsers return 186, which is the key code;

For the keypress event, only the printable character key can be triggered when pressed, at this time, the keyCode returns the Unicode character code corresponding to the character, which is not the same as the key code;

Key Code

0-948-57

A-Z65-90

a-z97-122

Space 32

Wave Charm 126

Exclamation point 33

@64

#35

$36

%37

&38

(40

)41

+43

* 42

^94

_95

Left square bracket 91

Backslash 92

93 in right square brackets

Left curly brace 123

Vertical line 124

Right curly brace 125

Single quote 39

Double quotation mark 34

Colon 58

Semicolon 59

Comma 44

Period 46

Oblique box 47

Less than number 60

Greater than number 62

Question mark 63

Enter 13

example:

Example: Block key combinations, such as:

Character encoding charCode property: This property returns the character Unicode value of the character key pressed when the keypress event is triggered, returning 0 in other events; the event has been deprecated by DOM3, it is recommended to use the key property instead of it, but so far, all browsers still support it;

In the keypress event, the keyCode property returns a value (also a character encoding, so it) is consistent with charCode;

IE8 and below and earlier versions of opear do not support charCode attributes, they are the keyCode encoding that is saved in the keyCode of the keypress event object where the keypress event occurs;

In addition, some lower versions of the browser will also trigger the keypress event when generating non-printing characters, but at this time its charCode value is 0, for which you can detect the case where its charCode property value is 0;

In particular, characters entered by Chinese input method will not trigger the keypress event, but will trigger the keydown and keyup events, however, the charCode of the event object is 0, and the keyCode always returns 229;

Cross-browser character encodings are added to the eventutil .js file:

apply:

which property: Returns the character code (charCode) when a key is pressed, which can occur in keydown, keyup, and keypress events; for example:

In the keypress event, its behavior and value are consistent with charCode, and the UniCode encoding of all keys can be returned in the keydown and keyup events;

IE8 and earlier versions do not support the which property, and browsers that do not support it can use the keyCode property; in addition, the keyCode property is not valid in the Firefox onkeypress event, so compatible with these browsers can:

In the DOM3 event standard, this property has been removed, but it is supported by all browsers;

key attribute: DOM3 level events make some changes to keyboard events, removing the keyCode, charCode and which attributes, and adding new attributes: key, which is used to get the key name;

The key attribute was added to replace keyCode, its value is the corresponding text character (such as "a" or "A"), that is, the key name, when the non-character key is pressed, the value of the key is the name of the corresponding key (such as "Shift" or "Down");

Example: Verify a phone number and accept only numbers, +, () 、-、 ArrowLeft, ArrowRight, Delete, or Backspace, such as:

Example: Move an element using a key:

All browsers support the key property, IE also supports a char property, which acts similarly to the key, but only the character key returns the value;

Safari and Chrome browsers also define a keyIdentifier property similar to the key for the event object, for function keys, return "Shift", "Enter", etc., for printable characters, return the Unicode encoding of this character, such as the A key, the value is "U+0041"; but currently all browsers have removed this property;

code attribute: represents the physical key that triggers the event;

Letter keys return: "Key<Letter>", such as: "KeyA", "KeyB", etc.; number keys return: "Digit<number>", such as: "Digit0", "Digit1", etc.; special keys are encoded by their names: "Enter", "Backspace", "Tab", etc.;

On different systems, the corresponding physical button key value is different, the following takes Windows as an example:

The key code value

ESCEscape

Numbers 0-9Digit0-Digit9

Minus"Minus"

Equal"Equal"

Backspace"Backspace"

Tab"Tab"

A-ZKeyA-KeyZ

Bracket"BracketLeft"/"BracketRight"

Enter"Enter"

Control"ControlLeft"/"ControlRight"

Semicolon"Semicolon"

Quote"Quote"

Backquote"Backquote"

Shift"ShiftLeft"/”ShiftRight”

Backslash"Backslash"

Paragraph"Paragraph"

Period"Period"

Slash"Slash"

Alt"AltLeft"/"AltRight"

Space"Space"

CapsLock CapsLock

F1-F12"F1"-“F12”

Pause"Pause"

ScrollLock"ScrollLock"

PrintScreen"PrintScreen"

Numpad0-9"Numpad0"-“Numpad9”

NumpadSubstract "NumpadSubtract" (subtraction)

NumpadAdd "NumpadAdd" (addition)

NumpadDecimal"NumpadDecimal"

NumpadMultiply"NumpadMultiply"

IntBackslash "IntlBackslash" (backslash, division)

NumpadEqual "NumpadEqual" (equal to)

NumLock"NumLock"

Home"Home"

End"End"

ArrowUp"ArrowUp"

ArrowLeft"ArrowLeft"

ArrowRight"ArrowRight"

ArrowDown"ArrowDown"

PageUp"PageUp"

PageDown"PageDown"

Insert"Insert"

Delete"Delete"

Meta"MetaLeft"/ “MetaRight

ContextMenu"ContextMenu"

Power"Power"

BrowserSearch"BrowserSearch"

BrowserFavorites "BrowserFavorites"

BrowserRefresh "BrowserRefresh"

BrowserStop "BrowserStop"

BrowserForward "BrowserForward"

BrowserBack "BrowserBack"

LaunchApp1LaunchApp1"

LaunchMail “LaunchMail"

In addition, for input method input, the key attribute is unrecognizable, it will return "Process", while the code attribute returns its physical key code;

For different languages, the key value is different, but the code is the same; for example:

Example: Controlling an element with the keyboard: structure and style:

repeat attribute: is a read-only property that returns a Boolean value that returns true if the key is held down

Secondary keys: Keyboard event objects also support secondary keys, with altKey, ctrlKey, shiftKey, and metaKey properties (the same as the secondary keys for mouse events):

getModifierState() method:

DOM3 level also adds a getModifierState() method to the event object, which receives an argument, i.e. a string equal to Shift, Control, AltGraph, or Meta, indicating the auxiliary key to be detected, if the specified auxiliary key is active, the method returns true, otherwise returns false;

Similar properties can also be obtained through the shiftKey, altKey, ctrlKey, and metaKey properties of the event object; IE8 and below do not support this method;

location attribute: DOM3-level events add a property called location, which returns a constant value of the long type indicating where the key was pressed: DOM_KEY_LOCATION_STANDARD value of 0 indicates the default keyboard, DOM_KEY_LOCATION_LEFT value of 1 indicates the left position (such as the left Alt key), DOM_KEY_LOCATION_ A RIGHT value of 2 indicates the right position (e.g. the Shift key on the right), a DOM_KEY_LOCATION_NUMPAD value of 3 indicates a numeric keypad, a DOM_KEY_LOCATION_MOBILE value of 4 indicates a mobile device keyboard (i.e. a virtual keyboard), a DOM_KEY_LOCATION_JOYSTICK value of 5 indicates a handle (such as a controller) ;( of which 4 and 5 are deprecated)

The location attribute can be used for keydown and keyup events, but not for keypress events; IE8 and below and other lower browsers do not support the location property; the lower version of Chrome also supports a keyLocation equivalent property, but the value returns 0 except for pressing the numeric keypad to return 3, which is now deprecated;

Example: Keymap class for keyboard shortcuts: Description: Mapping the identifiers of keys like PageUp, Alt_Z, and ctrl+alt+shift+F5 to JavaScript functions that are called in response to keystrokes; passing the key binding to the Keymap() constructor in the form of a JavaScript object, where the property name is the key identifier and the property value is a handler function; bind() is used And the unbing() method adds and removes bindings, using the install() method to configure the Keymap on the HTML element (usually the document object); configure the Keymap by registering the keydown event handler on the element; each time the key is pressed, the handler checks if there is a function related to the key, and if so, calls it If the key property of the DOM3 level event can be used in the keydown event handler, it is used first, if not, it will look up the KeyIdentifier property of Webkit and use it, otherwise, use the keyCode property; save as keymmap.js; such as:

Text Events:

Text-like event, with only one textinput, which is triggered when a character is entered in an editable area;

But only IE supports it, not all other browsers; but there is a non-standard textInput event, note that the first letter of Input is capitalized;

But in addition to Webkit browser support, IE and Firefox do not support textInput events;

The event complements keypress by blocking text before it is displayed to the user, i.e. the textinput event is triggered before the text is inserted into the text box;

But there are some differences between the two:

Any element that can get focus can trigger a keypress event, but only an editable element can trigger a textinput event;

The textinput event is only triggered when the user presses a key that can enter the actual character, while the keypress event is also triggered when keys that can affect the display of text (such as the backspace key);

The textinput event event object also contains a data attribute whose value is the input character;

In addition, textinput is triggered before keyup, after keypress, if the default behavior is blocked in the keypress event, then the textinput event may not be triggered, such as:

The textinput event is not a keyboard-specific event, whether through keyboard, cut and paste, drag and drop, etc., it will be triggered whenever text input occurs;

The inputMethod property of the event object is a set of constant values that represent the way text is entered (that is, the so-called input source), such as: 0 means that the browser is not sure how to enter, 1 means that it is entered using the keyboard, 2 means that it is pasted in, 3 means that it is dragged in, 4 means that it is entered by using IME, 5 means that it is entered by selecting a certain item in the form, 6 means that it is entered by handwriting, 7 means that it is entered by voice, 8 means that it is entered through several combinations of methods, and 9 means that it is entered through a script;

This property allows you to determine how text is entered into the control, but only IE supports the inputMethod property;

For keyboard input, the data attribute usually only holds a single character, but other input sources may usually contain multiple characters; for the keypress event, a keypress event represents a single character entered, which is saved using the keyCode or charCoode attribute, and returns the corresponding Unicode encoding, so it needs to be converted using the String.fromCharCode() method, such as:

Character input can be blocked by canceling the textinput, textInput, and keypress events, which means that these events can be used to filter input, such as filtering user input, saving as an InputFilter.js

InputEvent event:

The InputEvent class is used to construct event objects related to character input;

input event:

In addition, editable elements can also add input events;

The keypress and textinput events are triggered before the newly entered text is actually inserted into the editable area element, so it is possible to cancel the event or block text insertion in the event handler; the input event, which fires the event after the text is inserted, therefore, this event cannot be canceled and cannot specify the latest text in its event object; for example:

The event, like the text event, has the data and isComposing attributes;

data attribute: read-only, returns the currently entered string, if it is a delete operation, the value is an empty string;

isComposing attribute: read-only, returns a Boolean value indicating that the event was triggered after the positionstart event was triggered and before the compositionend event was triggered, i.e. the characters currently entered were input from the input method;

If the change does not insert text (for example, when a character is removed), it may be an empty string;

inputType attribute: indicates the type of text currently being edited, if it is inserted text, the value is insertText, if it is Delete delete character, the value is ddeleContentForward, if it is a Backspace delete character, the value is deleteContentBackward, if the text is cut, the value is deleteByCut, if it is a carriage return line feed, The value is insertLineBreak, if it is a paste input, the value is insertFromPaste, if it is dragged in, the value is insertFromDrop;

Although IE supports input events, it treats it as a normal Event type, so it does not have data and isComposing properties;

IE8 and below do not support this event, which provides a dedicated propertychange event that can be used to detect changes in the value attribute of text input elements;

Such as: cross-platform:

beforeinput event: beforeinput is triggered on <input>, <select> or <textarea> before the value is modified, and this event can also be triggered on elements where contenteditable is set to true and on any element after designMode is opened;

The event can be canceled, if canceled, the input event will not be triggered;

Change event: When the user changes the value of the < input >, < select> and <textarea > element and commits the change, the change event is triggered; unlike the input event, the change event is not triggered every time the value of the element changes;

The event cannot be canceled; the event belongs to the Event class;