在浏览器的输入中检测 Ctrl + C 和 Ctrl + V
Detect Ctrl + C and Ctrl + V in an input from browsers
我正在使用直接跟随,但我没有检测到输入中的复制和粘贴键,有人知道吗?谢谢!
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;
}
}
}
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')
}
}
你可以简单地做 who : 有关信息,此代码管理所有 mac 使用 CMD 而不是 ctrl 的用户
@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 用户的命令)
---评论后更新---
你可以这样做
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();
是 return 基于用户代理的事件类型的方法。 massive list of user agent can be find here
我建议不要监视复制和粘贴命令的关键事件,而是处理剪贴板事件(copy
、cut
、paste
)。除了处理不同平台上使用的各种快捷方式外,它还检测使用上下文菜单启动的剪贴板操作。请注意,可以使用 e.preventDefault()
取消 paste
事件。您可以在 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');
...
}
只需将其添加到任何组件即可。当用户执行组合键 Ctrl +s 时,它将打印 'Save Performed'
@HostListener('document:keydown.control.s', ['$event']) onKeydownHandler(event: KeyboardEvent) {
console.log('Save Performed');
event.preventDefault();
}
如果你想要 Ctrl +v 将 'document:keydown.control.s' 中的 's' 替换为 'v' .
首先导入HostListener 并创建一个监听keyup 事件的方法。
另外,请使用 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')
}
}
@HostListener('document:keydown.control.c', ['$event'])
onKeyDown(e) {
e.preventDefault();
}
@HostListener('document:keydown.control.v', ['$event'])
onKeyDown(e) {
e.preventDefault();
}
我正在使用直接跟随,但我没有检测到输入中的复制和粘贴键,有人知道吗?谢谢!
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;
}
}
}
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')
}
}
你可以简单地做 who : 有关信息,此代码管理所有 mac 使用 CMD 而不是 ctrl 的用户
@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 用户的命令)
---评论后更新---
你可以这样做
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();
是 return 基于用户代理的事件类型的方法。 massive list of user agent can be find here
我建议不要监视复制和粘贴命令的关键事件,而是处理剪贴板事件(copy
、cut
、paste
)。除了处理不同平台上使用的各种快捷方式外,它还检测使用上下文菜单启动的剪贴板操作。请注意,可以使用 e.preventDefault()
取消 paste
事件。您可以在 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');
...
}
只需将其添加到任何组件即可。当用户执行组合键 Ctrl +s 时,它将打印 'Save Performed'
@HostListener('document:keydown.control.s', ['$event']) onKeydownHandler(event: KeyboardEvent) {
console.log('Save Performed');
event.preventDefault();
}
如果你想要 Ctrl +v 将 'document:keydown.control.s' 中的 's' 替换为 'v' .
首先导入HostListener 并创建一个监听keyup 事件的方法。 另外,请使用 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')
}
}
@HostListener('document:keydown.control.c', ['$event'])
onKeyDown(e) {
e.preventDefault();
}
@HostListener('document:keydown.control.v', ['$event'])
onKeyDown(e) {
e.preventDefault();
}