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:

Blogroll

Popular Posts