如何在自定义OnlyNumberDirective中检测浏览器输入框的Ctrl+C/V快捷键？

Hey there, I’ve dealt with this exact frustration before when building input validation directives in Angular! The problem is that standard keyboard events like keydown don’t catch paste/copy actions triggered by Ctrl+C/V (or right-click context menus). Here’s how to update your OnlyNumberDirective to handle these cases:

Updated Directive Code #

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

@Directive({
  selector: '[appOnlyNumber]'
})
export class OnlyNumberDirective {
  // Allow decimal numbers with a single comma (adjust to '.' if needed for standard decimals)
  private regex: RegExp = new RegExp(/[0-9]+(\,[0-9]{0,1}){0,1}$/g);
  // Allow essential navigation/editing keys
  private specialKeys: Array<string> = ['Backspace', 'Tab', 'End', 'Home', 'Delete', 'Del', 'Ctrl', 'ArrowLeft', 'ArrowRight', 'ArrowUp', 'ArrowDown'];

  constructor(private el: ElementRef) { }

  // Handle direct key presses
  @HostListener('keydown', ['$event'])
  onKeyDown(event: KeyboardEvent): void {
    // Let special keys pass through without validation
    if (this.specialKeys.includes(event.key)) {
      return;
    }

    const currentValue = this.el.nativeElement.value;
    const newValue = currentValue + event.key;

    // Block input if it breaks our number rule
    if (!newValue.match(this.regex)) {
      event.preventDefault();
    }
  }

  // Catch paste actions (Ctrl+V or right-click paste)
  @HostListener('paste', ['$event'])
  onPaste(event: ClipboardEvent): void {
    event.preventDefault(); // Stop default paste behavior so we can validate first

    const pastedText = event.clipboardData?.getData('text') || '';
    const currentValue = this.el.nativeElement.value;
    const newValue = currentValue + pastedText;

    // Only paste if the combined value matches our regex
    if (newValue.match(this.regex)) {
      this.el.nativeElement.value = newValue;
    }
    // If it doesn't match, do nothing (block the paste)
  }

  // Optional: Restrict copy actions to valid content
  @HostListener('copy', ['$event'])
  onCopy(event: ClipboardEvent): void {
    const selectedText = window.getSelection()?.toString() || '';
    // Block copy if the selected text doesn't follow our number rule
    if (!selectedText.match(this.regex)) {
      event.preventDefault();
    }
  }
}

Key Changes Explained: #

• Added paste event listener: This is the critical fix! The ClipboardEvent lets us access the text being pasted, validate it against your regex, and only allow the paste if it fits your number format.
• Expanded special keys: Added arrow keys so users can navigate the input box without being blocked—this improves overall usability.
• Optional copy handler: If you want to prevent users from copying invalid content out of the input, this listener will block copies of text that doesn’t match your rules.

Note: Your regex uses a comma , as the decimal separator (common in European locales). If you need standard decimal points, just swap the comma for a dot . in the regex.

内容的提问来源于stack exchange，提问作者Mario Ramos García