时间戳

首页 > 解决方案 > 如何仅允许数字指令角度 9 的复制粘贴

angular - 如何仅允许数字指令角度 9 的复制粘贴

问题描述

我有一个只接受数字的文本框字段。当输入文本框而不是数字时，它不允许。

问题：1）复制+粘贴需要只允许数字吗？2）如果我阻止复制粘贴，它会阻止所有。

怎么做。目前，它允许所有人。

这是指令。

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

@Directive({
  selector: '[OnlyNumber]'
})
export class NumericDirective {

  constructor(private el: ElementRef) { }

  @Input() OnlyNumber: boolean;

  @HostListener('keydown', ['$event']) onKeyDown(event) {
    let e = <KeyboardEvent> event;
    if (this.OnlyNumber) {
      if ([46, 8, 9, 27, 13, 110, 190].indexOf(e.keyCode) !== -1 ||
        // Allow: Ctrl+A
        // (e.keyCode == 65 && e.ctrlKey === true) ||
        // Allow: Ctrl+C
        // (e.keyCode == 67 && e.ctrlKey === true) ||
        // // Allow: Ctrl+X
        // (e.keyCode == 88 && e.ctrlKey === true) ||
        // Allow: home, end, left, right
        (e.keyCode >= 35 && e.keyCode <= 39)) {
          // let it happen, don't do anything
          return;
        }
        // Ensure that it is a number and stop the keypress
        if ((e.shiftKey || (e.keyCode < 48 || e.keyCode > 57)) && (e.keyCode < 96 || e.keyCode > 105)) {
            e.preventDefault();
        }
      }
  }
}

标签： angularangular8angular-directiveangular9

解决方案

经过一番研究，我发现了这种方法。我不确定这是否是最干净的工作，但它可以完成复制/粘贴方面的工作。

@HostListener('keyboard,['$event']
onKeyDown(event: KeyboardEvent) {
   // Define Regex

   // This will allow copy and select all to happen without any issues.
   if (event.metaKey) {
        if (event.key.toLowerCase() === 'a' || event.key.toLowerCase() === 'c' || event.key.toLowerCase() === 'v') {
            return;
        }
    }

   //Validate the keystrokes across regex
}

@HostListener('paste', ['$event'])
onPaste(event: ClipboardEvent) {
   let dataToPaste = event.clipboardData.getData('text');

   // Validate 'dataToPaste' against the regex
}

如上，除了监听keydown事件之外，我还为粘贴事件添加了监听器。我建议根据正则表达式验证文本的功能是一个单独的功能。验证要复制的文本将确保我们只有数字。

推荐阅读