This article is for MacOS cmd key. Anuglar key event is not providing any special property like ctrlKey to detect cmd key, So we have to write our own logic to detect cmd key. Based on different browsers Cmd keyCode might be 224, 17, 91, 93.
Logic
Here we will use both keyUp and keyDown events. When user press cmd key, keyDown event will be triggered and cmdKey variable value will be true. When user release cmd key, keyUp event will be triggered and cmdKey variable value will be false.
Markup
Below keyup event calls onKeyUp function, keyDown event calls onKeyDown function
<textarea (keydown)="onKeyDown($event)" (keyup)="onKeyUp($event)" rows="4" cols="30">type Ctrl + C and Ctrl + V and Ctrl + S here</textarea>
Script - app.component.ts
Observe below code. Observe onKeyUp, onKeyDown functions, these function contains logic of detecting cmd key combination
import { Component } from '@angular/core'; @Component({ selector: 'my-app', template: ` <h2>Detect Cmd + C and Cmd + V and Cmd + S using Angular2</h2> <div> <h4>{{keyText}}</h4> <textarea (keydown)="onKeyDown($event)" (keyup)="onKeyUp($event)" rows="4" cols="30">type Ctrl + C and Ctrl + V and Ctrl + S here</textarea> </div> ` }) export class AppComponent { keyText: string = ''; cmdKey: boolean = false; onKeyUp($event): void { if($event.keyCode === 224 || $event.keyCode === 17 || $event.keyCode === 91 || $event.keyCode === 93) { this.cmdKey = false; } } onKeyDown($event): void { if($event.keyCode === 224 || $event.keyCode === 17 || $event.keyCode === 91 || $event.keyCode === 93) { this.cmdKey = true; } let charCode = String.fromCharCode($event.which).toLowerCase(); if (this.cmdKey && charCode === 'c') { this.keyText = 'Cmd + C pressed'; } else if (this.cmdKey && charCode === 'v') { this.keyText = 'Cmd + V pressed'; } else if (this.cmdKey && charCode === 's') { $event.preventDefault(); this.keyText = 'Cmd + S pressed'; } else { this.keyText = ''; } } }
0 comments:
Post a Comment