Custom Element: key-input

Custom elements to input key press events.

See this HTML source.

GitHub repository

Usage

Simple Usage:

Just <input is="key-input" />

raw-mod Bool Attribute:

Treat modifier keys as normal keys.

multiple Bool Attribute:

Allow multiple keys.

multiple and raw-mod:

This is the useful combination when you want to detect an event that distinguish ShiftLeft and ShiftRight.

ignore attribute:

Ignore provided pattern. This example ignores Tab and KeyA.

Matching KeyboardEvent

This package provide classes to match KeyboardEvent.

Match with the Latest KeyboardEvent: KeyInputMatcher

KeyInputMatcher is a class to match the latest KeyboardEvent with a provided pattern.

Press any key in the following input element. The KeyInputMatcher is built with Shift + KeyA + KeyS + KeyD. The result of matching with the input element is displayed in the following output elements. The result is true if the input element matches with each condition.

key-input element:

historySensitive=ignore

result=

Display true if you input Shift + KeyD

historySensitive=orderInsensitive (default)

result=

Display true if you input KeyD with holding down any Shift keys, KeyA and KeyS.

historySensitive=orderSensitive

result=

Display true if you input KeyD with holding down any Shift keys, KeyA and KeyS with the order.

Match with Holding Keys: KeyHoldMatcher

KeyHoldMatcher is a class to match the history of KeyboardEvent with a provided pattern.

Press any key in the following input element. The KeyHoldMatcher is built with Shift + ShiftLeft + KeyA + KeyS. The result of matching with the input element is displayed in the following output elements. The result is true if the input element matches with each condition.

key-input element:

rawMod=false (default)

result=

Display true if you hold KeyA + KeyS with any Shift keys.

rawMod=true

result=

Display true if you hold ShiftLeft + KeyA + KeyS.