web-dev-qa-db-ja.com

ブラウザーからの入力でCtrl + CおよびCtrl + Vを検出する

私は直接フォローを使用していて、入力内のキーでコピーアンドペーストを検出しません。誰かがその方法を知っていますか？ありがとうございました！

export class OnlyNumberDirective {
    // Allow decimal numbers. The \, is only allowed once to occur
    private regex: RegExp = new RegExp(/[0-9]+(\,[0-9]{0,1}){0,1}$/g);

    // Allow key codes for special events. Reflect :
    // Backspace, tab, end, home
    private specialKeys: Array<string> = [ 'Backspace', 'Tab', 'End', 'Home', 'Delete', 'Del', 'Ctrl', 'ArrowLeft', 'ArrowRight', 'Left', 'Right' ];

    constructor(private el: ElementRef) {
    }

    @HostListener('keydown', [ '$event' ])
    onKeyDown(event: KeyboardEvent): string {
        // Allow Backspace, tab, end, and home keys
        if (this.specialKeys.indexOf(event.key) !== -1) {
            return null;
        }

        // Do not use event.keycode this is deprecated.
        // See: https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/keyCode
        let current: string = this.el.nativeElement.value;
        // We need this because the current value on the DOM element
        // is not yet updated with the value from this event
        let next: string = current.concat(event.key);
        if (next && !String(next).match(this.regex)) {
            event.preventDefault();
            return null;
        } else {
            return next;
        }
    }
}
angulardirectivekeyboard-eventsonkeydown
8
Mario Ramos García

あなたは誰でも簡単に行うことができます：このコードでは、ctrlの代わりにCMDを使用するすべてのmacユーザーを管理します

_@HostListener('window:keydown',['$event'])
onKeyPress($event: KeyboardEvent) {
    if(($event.ctrlKey || $event.metaKey) && $event.keyCode == 67)
        console.log('CTRL + C');
    if(($event.ctrlKey || $event.metaKey) && $event.keyCode == 86)
        console.log('CTRL +  V');
}
_

他の種類のショートカットを検出したい場合：

  • event.ctrlKey
  • event.altKey
  • event.metaKey（Macユーザー向けの別名Cmd）

オンラインサンプル

---コメント後に更新---

あなたはこのようなことをすることができます

_  ngOnInit() {
        this.bindKeypressEvent().subscribe(($event: KeyboardEvent) => this.onKeyPress($event));
    }

    onKeyPress($event: KeyboardEvent) {
        if(($event.ctrlKey || $event.metaKey) && $event.keyCode == 67)
            console.log('CTRL + C');
        if(($event.ctrlKey || $event.metaKey) && $event.keyCode == 86)
            console.log('CTRL +  V');
    }

    private bindKeypressEvent(): Observable<KeyboardEvent> {
        const eventsType$ = [
            fromEvent(window, 'keypress'),
            fromEvent(window, 'keydown')
        ];
        // we merge all kind of event as one observable.
        return merge(...eventsType$)
            .pipe(
                // We prevent multiple next by wait 10ms before to next value.
                debounce(() => timer(10)),
                // We map answer to KeyboardEvent, TypeScript strong typing...
                map(state => (state as KeyboardEvent))
            );
    }
_

または機能していない場合は、単に：

_private bindKeypress(): Observable<KeyboardEvent> {
    const typeOfEvent = this.deviceService.getKeybordEvent();
    fromEvent(window, typeOfEvent)
    .pipe(
        // We map answer to KeyboardEvent, TypeScript strong typing...
        map(state => (state as KeyboardEvent))
    );
}
_

ここで、this.deviceService.getKeybordEvent();は、ユーザーエージェントに基づいてイベントの種類を返すメソッドです。 ユーザーエージェントの大規模なリストはここにあります

10
Yanis-git

Angularはキーを押す組み合わせを聞くための高レベルAPIを提供します。次の例を確認してください。

ctrl-keys.directive.ts

import { Directive, Output, EventEmitter, HostListener } from '@angular/core';

@Directive({
  selector: '[ctrlKeys]',
})
export class CtrlKeysDirective  {
  @Output() ctrlV = new EventEmitter();
  @Output() ctrlC = new EventEmitter();

  @HostListener('keydown.control.v') onCtrlV() {
    this.ctrlV.emit();
  }

  @HostListener('keydown.control.c') onCtrlC() {
    this.ctrlC.emit();
  }
}

用途

import { Component } from '@angular/core';

@Component({
  selector: 'my-app',
  template: `
  <input ctrlKeys (ctrlV)="onCtrlV()" (ctrlC)="onCtrlC()" >
  `,
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  onCtrlV() {
    console.log('ctrlV pressed')
  }

  onCtrlC() {
    console.log('ctrlC pressed')
  }
}

ライブデモ

9
Tomasz Kula

コピーアンドペーストコマンドの主要なイベントを監視する代わりに、クリップボードイベント（copy、cut、paste）を処理することをお勧めします。さまざまなプラットフォームで使用されるさまざまなショートカットに対応するだけでなく、コンテキストメニューで開始されたクリップボード操作も検出します。 pasteイベントはe.preventDefault()でキャンセルできることに注意してください。動作中のコードは this stackblitz で確認できます。

@HostListener('copy', ['$event'])
onCopy(e: ClipboardEvent) {
  ...
}

@HostListener('paste', ['$event'])
onPaste(e: ClipboardEvent) {
  let clipboardData = e.clipboardData || window.clipboardData;
  let pastedText = clipboardData.getData('text');
  ...
}
2
ConnorsFan

これを任意のコンポーネントに追加するだけです。ユーザーがキーの組み合わせを実行したとき Ctrl +s 「保存済み」と表示されます

@HostListener('document:keydown.control.s', ['$event']) onKeydownHandler(event: KeyboardEvent) {
    console.log('Save Performed');
    event.preventDefault();
}

お望みならば Ctrl +v 「document：keydown.control.s」の「s」を「v」に置き換えます。

2
Dilshan Liyanage

最初にHostListenerをインポートし、キーアップイベントをリッスンするメソッドを作成します。キーコードは非推奨であるため、ctrlKeyも使用します。

import { HostListener} from '@angular/core';

    @HostListener('window:keyup', ['$event'])
       keyEvent(event: KeyboardEvent) {
          if (event.ctrlKey) {
              if (event.key === 'c') {
                 console.log('ctrl c');         
              }      
             else if (event.key === 'v') {
                 console.log('ctrl v')
              }
      }
0
nesdi