有附加输入限制的角度/原始-正则keyFilter

Question

我希望创建一个keyFilter来使用IP-regex验证IP地址，如下所示：

<input pInputText type="text" [(ngModel)]="value1" [pKeyFilter]= "IPAddressKeyFilter" [pValidateOnly]="true" placeholder="0.0.0.0"/>

IP验证本身工作良好，但仍然可以输入除“0-9”以外的任何其他字符。

这是由于pValidateOnly设置为true。否则，将每一个键笔画与将失败的IP正则表达式进行比较(参见post#1或post#2)。

如何阻止除“0-9”以外的任何输入？

inputMask和keyFilter/regex的某些组合是可以的。但是对于这个用例，inputMask根本不起作用。

参考下面的示例@ stackblitz 来更好地了解情况。

更新

我实现了一些events (多亏了@Morfioss)。

我从上面更新了stackblitz。

摘要：

• 添加了粘贴-event，这是通过keyFilter (进程也是IP-regex)无法实现的。
• 实现KeyDown-event以检查输入的键是否为"0-9.“。
• 修正了先前的粘贴事件，因为"CTRL+V“也被通过按键事件阻塞了 ("Backspace”、"Del“或任何带有Arrow-Keys的导航，=>也在事件中手动绕过了这些情况.)

因此，到目前为止，它基本上是如何实现的：

​

// component.ts
export class AppComponent {
  IPv4AddressKeyFilter: RegExp =
    /(^\s*((([0-9]|[1-9][0-9]|1[0-9]{2}|2[0-4][0-9]|25[0-5])\.){3}([0-9]|[1-9][0-9]|1[0-9]{2}|2[0-4][0-9]|25[0-5]))\s*$)/;

  IPAddressInputOnly: RegExp = new RegExp('[0-9.]');

  valueIPv4: string = '';

  constructor() {}

  ngOnInit(): void {}
  
  OnIPAddressPaste(event: ClipboardEvent) {
    let clipboardData = event.clipboardData;
    let pastedText = clipboardData.getData('text');

    if (this.IPv4AddressKeyFilter.test(pastedText)) {
      this.valueIPv4 = pastedText;
      return true;
    }

    event.preventDefault();
    return false;
  }

  OnIPAddressKeyDown(event: KeyboardEvent) {
    switch (event.key) {
      case 'Backspace':
      case 'Delete':
      case 'ArrowLeft':
      case 'ArrowRight':
      case 'Home':
      case 'End':
        return true;
    }

    if (event.ctrlKey) {
      switch (event.key) {
        case 'c':
        case 'v':
        case 'x':
          return true;
      }
    }

    if (this.IPAddressInputOnly.test(event.key)) {
      return true;
    }
    event.preventDefault();
    return false;
  }
}

<!-- component.html -->
<input
    pInputText
    type="text"
    [(ngModel)]="valueIPv4"
    [pKeyFilter]="IPv4AddressKeyFilter"
    [pValidateOnly]="true"
    placeholder="0.0.0.0"
    (paste)="OnIPAddressPaste($event)"
    (keydown)="OnIPAddressKeyDown($event)"
  />

​

顺便说一句。KeyPress-event会运行得很好，不像KeyDown.然而，它是不可取的(请参阅此帖子)

我也尝试过输入、KeyUp、BeforeInput事件，这些事件并不像预期的那样工作.不知道什么是最好的做法。

上面的stackblitz也提供了这些示例代码。

，我对这个解决方案并不是百分之百满意，但是到目前为止它对我来说是可行的。如有任何评论、意见或其他任何意见，我将不胜感激。

Answer 1

只需在输入中添加一个事件：

​

NumberOnly(e) {
    var regex = new RegExp("[0-9]");
    var str = String.fromCharCode(!e.charCode ? e.which : e.charCode);
    if (regex.test(str)) {
      return true;
    }
    e.preventDefault();
    return false;
  }
  onPaste(e) {
    e.preventDefault();
    return false;
  }

html

<input (input)="NumberOnly($event)"/>

​

还可以尝试在type=输入中添加“数字”