如何限制材料输入中的特殊字符

Posted 2023-02-22

【中文标题】如何限制材料输入中的特殊字符

【英文标题】：How to restrict Special character in material input

【发布时间】：2018-12-27 22:31:30

【问题描述】：

我有一个材料输入控件，我在用户输入时限制了特殊字符，但是当在任何编辑器中键入一些单词并复制并粘贴带有特殊字符的单词时，它不起作用。

我已经为此编写了防止特殊字符的指令，但是可以提供更好的解决方案限制复制粘贴。

app.component.html：

<form class="example-form">
  <mat-form-field class="example-full-width">
    <input matInput specialIsAlphaNumeric placeholder="Favorite food" value="Sushi">
  </mat-form-field>

  <mat-form-field class="example-full-width">
    <textarea matInput placeholder="Leave a comment"></textarea>
  </mat-form-field>
</form>

指令：

import  Directive, HostListener, Input  from '@angular/core';
@Directive(
    selector: '[specialIsAlphaNumeric]'
)
export class SpecialCharacterDirective 

    regexStr = '^[a-zA-Z0-9_]*$';
    @Input() isAlphaNumeric: boolean;

    @HostListener('keypress', ['$event']) onKeyPress(event) 
        return new RegExp(this.regexStr).test(event.key);
    

demo see here:

https://stackblitz.com/edit/angular-cijbqy-biwrck?file=app%2Finput-overview-e[stackblit

重现步骤：

输入不允许的特殊字符：工作正常。 而复制粘贴机智允许特殊字符

【问题讨论】：

尝试onchange 或onChange 而不是keypress

@Hussain 我已经尝试过 OnChange 以及粘贴事件都被触发，但它允许粘贴。如果您的解决方案，请在此处更新 https://stackblitz.com/edit/angular-cijbqy-biwrck?file=app/specialChracter.directive.ts

【参考方案1】：

以下方法可以在不使用 setTimeout 调用的情况下工作，这意味着使用 other response by Aashish K Jha 时输入控件中不会闪烁特殊字符

import  Directive, HostListener, ElementRef, Input  from '@angular/core';
@Directive(
  selector: '[specialIsAlphaNumeric]'
)

export class SpecialCharacterDirective 

  regexStr = '^[a-zA-Z0-9_]*$';
  @Input() isAlphaNumeric: boolean;

  constructor(private el: ElementRef)  


  @HostListener('keypress', ['$event']) onKeyPress(event) 
    return new RegExp(this.regexStr).test(event.key);
  

  @HostListener('paste', ['$event']) blockPaste(event: ClipboardEvent) 
    this.validateFields(event);
  

  validateFields(event: ClipboardEvent) 
    event.preventDefault();
    const pasteData = event.clipboardData.getData('text/plain').replace(/[^a-zA-Z0-9 ]/g, '');
    document.execCommand('insertHTML', false, pasteData);
  

【讨论】：

没有 setTimeout 意味着用户粘贴内容时没有闪烁，比简单地等待 100 毫秒要好得多

【参考方案2】：

您可以使用Ng Knife 实用程序

导入 NgKnifeModule

... 
import  NgKnifeModule  from 'ng-knife';
...
@NgModule(
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    NgKnifeModule
  ],
  ...
);
export class AppModule  

使用它：

<!-- Aphanumeric -->
<input knifeAlphanumeric type="text">

【讨论】：

这是迄今为止最干净的解决方案。如果别人已经做过了，为什么还要重新发明***！？谢谢！

【参考方案3】：

试试这样：

stackblitz example

import  Directive, HostListener, ElementRef, Input  from '@angular/core';
@Directive(
  selector: '[specialIsAlphaNumeric]'
)
export class SpecialCharacterDirective 

  regexStr = '^[a-zA-Z0-9_]*$';
  @Input() isAlphaNumeric: boolean;

  constructor(private el: ElementRef)  


  @HostListener('keypress', ['$event']) onKeyPress(event) 
    return new RegExp(this.regexStr).test(event.key);
  

  @HostListener('paste', ['$event']) blockPaste(event: KeyboardEvent) 
    this.validateFields(event);
  

  validateFields(event) 
    setTimeout(() => 

      this.el.nativeElement.value = this.el.nativeElement.value.replace(/[^A-Za-z ]/g, '').replace(/\s/g, '');
      event.preventDefault();

    , 100)
  

【讨论】：

@MohamedSahir，如果您想要原始答案是：***.com/questions/47384952/… 它也包括剪切和复制。

@UnluckyAj 对输入字段按预期工作，当使用多输入控件时，它将字符拆分为 1 个选项卡，将空字符串拆分为另一个选项卡，同时复制粘贴此文本 DDD@# ，所以它以 DDD 为第一，@# 替换为 '' 未按预期工作。附上截图并创建一个演示

@UnluckyAj 这个解决方案在 UI 中出现了闪现问题，这在我下面的解决方案中得到了修复

感谢 StackBlitz！

它可以工作，但它不允许字符之间的空间，我需要空间？