如何限制材料输入中的特殊字符 [英] How to restrict Special character in material input

问题描述

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

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

app.component.html:

<mat-form-field class="example-full-width"><input matInput specialIsAlphaNumeric placeholder="最喜欢的食物" value="寿司"></mat-form-field><mat-form-field class="example-full-width"><textarea matInput placeholder="留下评论"></textarea></mat-form-field></表单>

指令:

import { Directive, HostListener, Input } from '@angular/core';@指示({选择器:'[specialIsAlphaNumeric]'})导出类 SpecialCharacterDirective {regexStr = '^[a-zA-Z0-9_]*$';@Input() isAlphaNumeric: boolean;@HostListener('keypress', ['$event']) onKeyPress(event) {return new RegExp(this.regexStr).test(event.key);}}

重现步骤:

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

解决方案

Try Like this:

stackblitz 示例

import { Directive, HostListener, ElementRef, Input } from '@angular/core';@指示({选择器:'[specialIsAlphaNumeric]'})导出类 SpecialCharacterDirective {regexStr = '^[a-zA-Z0-9_]*$';@Input() isAlphaNumeric: boolean;构造函数(私有 el:ElementRef){}@HostListener('keypress', ['$event']) onKeyPress(event) {return new RegExp(this.regexStr).test(event.key);}@HostListener('paste', ['$event']) blockPaste(event: KeyboardEvent) {this.validateFields(事件);}验证字段(事件){setTimeout(() => {this.el.nativeElement.value = this.el.nativeElement.value.replace(/[^A-Za-z ]/g, '').replace(/\s/g, '');event.preventDefault();}, 100)}}

I have a material input control, i have restrict the special character while user enter, but when type some words in any editor and copy and paste the words with special character, which is not working.

I have write the directive for that to prevent special character,but can one provide the better solution restrict in copy paste.

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>

directive:

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:

Steps to reproduce:

type it special character which is not allowed : working fine. while copy paste wit allows special character

解决方案

Try Like this:

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)
  }

}

这篇关于如何限制材料输入中的特殊字符的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！