Keyup enter1/4/2023 It would be more readable or at least easier on the eyes if it were mapped to its declarative keyword: "minus". For example, if I want to listen the Minus keystroke, I can only do that as follows: Īs you can see, it looks rather odd or syntactically wrong, but it works. As they are symbol keys, they result in very poor readability or sometimes even break the binding itself. Unfortunately, Angular pseudo-events are still missing this kind of mapping for most of the symbol keys such as Minus, Equal, Slash, BracketLeft, BracketRight, Backquote, etc. As its KeyboardEvent.key property value is " ", it’s mapped to the "space" keyword for better readability. The same thing goes for the Space keystroke. So you would do the following to properly listen to the Dot keystroke: That’s why it’s mapped to the "dot" keyword. But, as you can imagine, it would be syntactically improper to use it in a pseudo-event as dots function as a separator in key combinations. When you hit the dot key on your keyboard, its KeyboardEvent.key property value would be ".". Let’s move onto the examples of non-modifier keys.Ĭurrently, there are only two keys that are an exception to this: Dot and Space. Both of the examples below show valid use cases: So you can place them in any order that suits your needs. Third, the sequence of modifier keys themselves doesn’t matter. In contrast, the example below shows an improper placement of a modifier key: The following is a proper placement of a non-modifier key as the Z (non-modifier key) is defined at the end: Second, a non-modifier key must be always defined at the very end of the key combination. For example, the following case wouldn’t work as the combination consists of only letter keys: First, any key combination must have at least one modifier key, but only one non-modifier key. There are several points that you need to keep in mind to use modifier keys in Angular pseudo-events. Modifier key pseudo-events look like this: I will refer to any other key as a non-modifier key from here on. Modifier keys include Shift, Control, Alt(Option), and Meta(Command). Now let’s go over the key values that are available in Angular pseudo-events. If you want to see a comprehensive list of keyboard event key property values, please see this reference. In fact, they are case-insensitive key property values of KeyboardEvent. They are not unique to Angular pseudo-events. You might be wondering where these key names such as control, shift, and z are coming from. Now take a look at this example of a pseudo-event key combination: Using Angular Pseudo-Events in like any other DOM events, you can listen to pseudo-events through ') undo(event: KeyboardEvent) Key names in Pseudo-Events Now let’s see how Pseudo-Events can facilitate us to listen to CTRL+Z key combination:Īs you can see, we now no longer need to check which keystrokes are registered because we specify the combination of keys that our handler should respond to, and the syntax has become more declarative. KEYUP ENTER HOW TOThe following is an example of how to declare pseudo-events in your template: That means a keyboard event will be only fired on that specific key or key combination instead of on all key events. Through pseudo-events, Angular allows you to directly bind to a specific keystroke or keystroke combination. KEYUP ENTER FREEAlso, the more key combinations we need to listen to, the more convoluted the syntax becomes.Īngular pseudo-events will free you from all the concerns above. However, some of them have been deprecated or browser support for them will vary from one browser to another. There are also other properties of KeyboardEvent that you can use to check and catch keystrokes such as KeyboardEvent.key, KeyboardEvent.charCode, KeyboardEvent.ke圜ode or KeyboardEvent.which. As you can see in the example above, I am looking at the KeyboardEvent.key to check which keystroke is hit.
0 Comments
Leave a Reply.AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |