Angular keyboard event event comes with ctrlKey property. If user clicks button along with Ctrl key, event.ctrlKey will true. By using this behaviour we detect Ctrl + C, Ctrl + V and Ctrl + S combination
Markup
Below keyup event calls onKeyUp function
<textarea (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 function, this function contains logic of detecting Ctrl key combination
import { Component } from '@angular/core'; @Component({ selector: 'my-app', template: ` <h2>Detect Ctrl + C and Ctrl + V and Ctrl + S using Angular2</h2> <div> <h4>{{keyText}}</h4> <textarea (keyup)="onKeyUp($event)" rows="4" cols="30">type Ctrl + C and Ctrl + V and Ctrl + S here</textarea> </div> ` }) export class AppComponent { keyText: string = ''; onKeyUp($event): void { let charCode = String.fromCharCode($event.which).toLowerCase(); if ($event.ctrlKey && charCode === 'c') { this.keyText = 'Ctrl + C pressed'; } else if ($event.ctrlKey && charCode === 'v') { this.keyText = 'Ctrl + V pressed'; } else if ($event.ctrlKey && charCode === 's') { $event.preventDefault(); this.keyText = 'Ctrl + S pressed'; } } }
0 comments:
Post a Comment