如何使用 Angular 2 / Typescript 限制输入字段中的特殊字符

Posted 2023-02-22

【中文标题】如何使用 Angular 2 / Typescript 限制输入字段中的特殊字符

【英文标题】：How to restrict special characters in the input field using Angular 2 / Typescript

【发布时间】：2017-12-17 17:58:10

【问题描述】：

我是 Angular 2 的新手。我需要防止在输入字段中输入特殊字符。如果我输入字母数字，它必须接受它们，而特殊字符应该被阻止。谁能帮忙。

我在这里分享代码。

在 html 中：

<md-input-container>
   <input type="text" (ngModelChange)="omit_special_char($event)" mdInput name="name" [(ngModel)]="company.name" placeholder="Company Name" #name="ngModel" minlength="3" required>
</md-input-container>

在 TS 中：

public e: any;

omit_special_char(val)

   var k;
   document.all ? k = this.e.keyCode : k = this.e.which;
   return ((k > 64 && k < 91) || (k > 96 && k < 123) || k == 8 || k == 32 || (k >= 48 && k <= 57));

【问题讨论】：

你可以使用 ng-pattern。它非常简单实用

【参考方案1】：

你做的一切都是对的。只是功能需要稍作改动。您正在使用 ngModelChange 绑定不存在的事件。您可以使用 keypress 事件处理程序，如下所示。

HTML

   <md-input-container>
    <input type="text" (keypress)="omit_special_char($event)" mdInput name="name" [(ngModel)]="company.name" placeholder="Company Name" #name="ngModel" minlength="3" required>
    </md-input-container>

组件

omit_special_char(event)
   
   var k;  
   k = event.charCode;  //         k = event.keyCode;  (Both can be used)
   return((k > 64 && k < 91) || (k > 96 && k < 123) || k == 8 || k == 32 || (k >= 48 && k <= 57)); 

"event" 是您之前传递的"$event" 本身的对象。试试这个，它肯定会与 angular2 一起工作。

【讨论】：

您的解决方案很好，但不适用于复制和粘贴。如果您为此提供解决方案，谢谢您

@Abhijeet 它被编码来解决提问者的问题，因此可能需要根据您的需要进行更改。

@MaulikModi 是的，对.. 但我的问题已经解决了，我自己修好了:)

这种方法的一个问题是当用户粘贴数据时它不起作用。你也应该在 blur 上调用函数。

我正在使用离子角度。你能帮我用android实现同样的功能吗？

【参考方案2】：

我结合了这篇文章和其他帖子中的几个答案，并创建了用于处理手动输入和粘贴数据的自定义指令。

指令：

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

        @Input('appInputRestriction') appInputRestriction: string;
        arabicRegex = '[\u0600-\u06FF]';

        constructor(el: ElementRef) 
            this.inputElement = el;
        

        @HostListener('keypress', ['$event']) onKeyPress(event) 
            if (this.appInputRestriction === 'integer') 
                this.integerOnly(event);
             else if (this.appInputRestriction === 'noSpecialChars') 
                this.noSpecialChars(event);
            
        

        integerOnly(event) 
            const e = <KeyboardEvent>event;
            if (e.key === 'Tab' || e.key === 'TAB') 
                return;
            
            if ([46, 8, 9, 27, 13, 110].indexOf(e.keyCode) !== -1 ||
                // Allow: Ctrl+A
                (e.keyCode === 65 && e.ctrlKey === true) ||
                // Allow: Ctrl+C
                (e.keyCode === 67 && e.ctrlKey === true) ||
                // Allow: Ctrl+V
                (e.keyCode === 86 && e.ctrlKey === true) ||
                // Allow: Ctrl+X
                (e.keyCode === 88 && e.ctrlKey === true)) 
                // let it happen, don't do anything
                return;
            
            if (['1', '2', '3', '4', '5', '6', '7', '8', '9', '0'].indexOf(e.key) === -1) 
                e.preventDefault();
            
        

        noSpecialChars(event) 
            const e = <KeyboardEvent>event;
            if (e.key === 'Tab' || e.key === 'TAB') 
                return;
            
            let k;
            k = event.keyCode;  // k = event.charCode;  (Both can be used)
            if ((k > 64 && k < 91) || (k > 96 && k < 123) || k === 8 || k === 32 || (k >= 48 && k <= 57)) 
                return;
            
            const ch = String.fromCharCode(e.keyCode);
            const regEx = new RegExp(this.arabicRegex);
            if (regEx.test(ch)) 
                return;
            
            e.preventDefault();
        

        @HostListener('paste', ['$event']) onPaste(event) 
            let regex;
            if (this.appInputRestriction === 'integer') 
                regex = /[0-9]/g;
             else if (this.appInputRestriction === 'noSpecialChars') 
                regex = /[a-zA-Z0-9\u0600-\u06FF]/g;
            
            const e = <ClipboardEvent>event;
            const pasteData = e.clipboardData.getData('text/plain');
            let m;
            let matches = 0;
            while ((m = regex.exec(pasteData)) !== null) 
                // This is necessary to avoid infinite loops with zero-width matches
                if (m.index === regex.lastIndex) 
                    regex.lastIndex++;
                
                // The result can be accessed through the `m`-variable.
                m.forEach((match, groupIndex) => 
                    matches++;
                );
            
            if (matches === pasteData.length) 
                return;
             else 
                e.preventDefault();
            
        

    

用法：

<input type="text" appInputRestriction="noSpecialChars" class="form-control-full" [(ngModel)]="noSpecialCharsModel" [ngModelOptions]="standalone: true" [disabled]="isSelected" required>

<input type="text" appInputRestriction="integer" class="form-control-full" [(ngModel)]="integerModel" [ngModelOptions]="standalone: true">

这实际上是我的第一个 *** 答案，所以我希望它有所帮助。

【讨论】：

感谢我使用了您的代码，但是我对其进行了一些更改，因为您的代码会阻止任何无效的粘贴数据（包含特殊字符）。但是在我这边，我想删除特殊字符，所以我替换了一小部分代码，效果很好。谢谢

【参考方案3】：

angular2 代码示例。

<input type="text" pattern="/[A-Z]5\d4[A-Z]1/i">

或

<md-input-container>
<input type="text" (keypress)="omit_special_char($event)" mdInput name="name" [(ngModel)]="company.name" placeholder="Company Name" #name="ngModel" minlength="3" required>
</md-input-container>

omit_special_char(val)

   var k;
    document.all ? k = this.e.keyCode : k = this.e.which;
    return ((k > 64 && k < 91) || (k > 96 && k < 123) || k == 8 || k == 32 || (k >= 48 && k <= 57));

这里是纯 javascript 中的工作示例，因为 angular2/typescript 在 *** 中不支持。

function omit_special_char(e) 
    var k;
    document.all ? k = e.keyCode : k = e.which;
    return ((k > 64 && k < 91) || (k > 96 && k < 123) || k == 8 || k == 32 || (k >= 48 && k <= 57));

<input type="text" onkeypress="return omit_special_char(event)"/>

【讨论】：

感谢您的回复。我会试着告诉你

抱歉，它不适用于我。我粘贴了我用我的代码尝试过的内容。我已经更新了我的代码，请看一下

e 是事件。你可以运行上面的代码，它应该可以工作。基于此在您的打字稿中修改它

是的，上面的 sn-p 以我想要的方式工作。我正在尝试但没有得到

我可以在 Angular 1 中显示演示，但您只需要 Angular 2？

【参考方案4】：

您可以在输入标签中使用模式 适用于 angular7。

用于验证特殊字符

                <input #Name="ngModel" type="text" name="Name" required maxlength="256" minlength="2"
                    [(ngModel)]="Name" class="validate form-control" pattern="^[a-zA-Z0-9]+$">
                </div>

允许空间 使用 => 模式="^[a-zA-Z0-9 ]+$">

显示验证消息的完整用法：

                <label for="Name" class="form-label">"Name" | localize*</label>

                <div class="input-group"><input #dashboardName="ngModel" type="text" name="Name" required maxlength="256" minlength="2"
                    [(ngModel)]="Name" class="validate form-control" pattern="^[a-zA-Z0-9 ]+$">
                </div>
                <validation-messages [formCtrl]="Name"></validation-messages>
            </div>

【参考方案5】：

你也可以使用 Regex 模式

<md-input-container>
<input type="text" (ngModelChange)="omit_special_char($event)" mdInput name="name" [(ngModel)]="company.name" placeholder="Company Name" #name="ngModel" minlength="3" required>
</md-input-container>

public omit_special_char(e: any) 
    try 
        let k;
        if (/^[a-zA-Z0-9\s]*$/.test(e.key)) 
            return true;
         else 
            e.preventDefault();
            return false;
        
     catch (e) 
    

【参考方案6】：

您可以使用 ng-change 属性，然后在 javascript 中调用函数并在那里验证..

<md-input-container> 
<input type="text" mdInput ng-change="myValidationFunction()" name="name" placeholder="Company Name" #name="ngModel" ng-model="name" minlength="3" required>
</md-input-container>

在 JavaScript 中：

myValidateFunction() 

  if ($scope.name.matches("^[a-zA-Z0-9]+$")) 
     return true;
   
  else 
     return false
  

根据函数结果，你可以做你想做的事......验证或禁止，或者如果你想显示任何 CSS 消息，那么你可以

【讨论】：

感谢回复我会试试的

$scope 在 angular2 中不存在

你可以改用'this'

我收到此错误：没有将“exportAs”设置为“ngModel”的指令（“ype="text" (ngModelChange)="myValidationFunction()" mdInput name="name" placeholder= "公司名称" [错误 ->]#name="ngModel" ng-model="name" minlength="3" 必填>

【参考方案7】：

您可以使用 html5 模式验证器作为

<input type="text" (ngModelChange)="omit_special_char($event)" mdInput name="name" [(ngModel)]="company.name" placeholder="Company Name" #name="ngModel" minlength="3" required pattern="[a-zA-Z0-9]">

将 novalidate 添加到表单中，然后您可以显示相同的错误

<div *ngIf="name?.errors.pattern && name.dirty && name.invalid">Error Message</div>