You can add each of these event types to an HTML element or document object using the addEventListener method. We can get contextual information about these events from the KeyboardEvent interface's properties and methods. There are primarily three keyboard event types, keydown, keypress and, keyup. It extends the UIEvent interface which eventually extends the Event interface. The KeyboardEvent interface provides information using the defined constants, properties, and a single method (as of January 2021). The KeyboardEvent interface and the event types
At the same time, W3.org keeps updating the specification by introducing new properties, deprecating existing ones, and marking certain code as legacy.īecause of this, it is essential for web developers to keep learning about the KeyboardEvent interface to know what exactly they should use and what's no longer relevant.
There have been many articles written about how they work and how to use them. Like many other JavaScript events, the KeyboardEvent interface provides all the required properties and methods for handling every keystroke a user makes using the keyboard. I handle the key event, logging the value.JavaScript keyboard events help you capture user interactions with the keyboard. As such, it can only be bound to a specific element. binding to the GLOBAL scope for some reason (ie, document: or CAUTION: The built-in key event plugin does not support userName: new FormControl, Validators.maxLength(10)) We will write code in HTML template as following. Using Reactive form We need to pass Validators.maxLength in FormControl while creating FormGroup. NOTE: This only works with keydown and keyup - NOT keypress. When user starts entering value, only the max 10 characters can be entered. and key-identifiers as per the specification: us to bind to specific key combinations, including modifiers support that comes with Angular 2 out-of-the-box. In the following template, we are binding to the key-event
Configure the App component definition. I provide the root application component. Defer bootstrapping until all of the components have been declared. Native Key-Combination Event Binding In Angular 2 Beta 17 To see this in action, I've create a simple demo in which you can focus an Input (remember this doesn't work on the global event scope) and try a number of the native key-combinations: Dot - Since the modifiers are dot-delimited.īeyond that, the values in your event-type are either character literals or special values taken from the "key" property of the event object (ex, "ArrowRight" and "PageDown").
There are then two replacement keys that are there just keep the syntax from breaking:
meta - The Command key on Mac and the Windows key on Windows.
You basically start with the event-type and then add a series of dot-delimited modifiers.
The syntax for the key binding is very similar to what I had in my previous post. Meaning, if you need to cancel the default-behavior of the key-combination, you have to do it yourself (with $event.preventDefault()). There is also no implicit support for browser-overrides. And, these key combinations can only be bound to a specific element (or host) - the plugin doesn't appear to support the global "document:" or "window:" event-scope. The native KeyEventsPlugin plugin only support keydown and keyup events, not keypress. So, digging through the actual source code, here's what I can find.įirst, the limitations. It is touched upon briefly in the " Basics: User Input" documentation but, there is very little explanation of either the breadth or the limitations of the key-combination support. Run this demo in my JavaScript Demos project on GitHub.įrom what I can see, this appears to be an all-but-undocumented feature.