html – Angular2 – 输入字段仅接受数字
发布时间:2020-12-14 21:20:51 所属栏目:资源 来源:网络整理
导读:在Angular2中,如何屏蔽输入字段(文本框),使其仅接受数字而不接受字母? 我有以下HTML输入: input type="text" *ngSwitchDefault class="form-control" (change)="onInputChange()" [(ngModel)]="config.Value" focus)="handleFocus($event)" (blur)="hand
在Angular2中,如何屏蔽输入字段(文本框),使其仅接受数字而不接受字母?
我有以下HTML输入: <input type="text" *ngSwitchDefault class="form-control" (change)="onInputChange()" [(ngModel)]="config.Value" focus)="handleFocus($event)" (blur)="handleBlur($event)"/> 上面的输入是通用文本输入,可以用作简单文本字段或数字字段(例如显示年份)。 使用angular2,我如何使用相同的输入控件并在此字段上应用某种过滤器/掩码,这样它只接受数字? 注意:我需要仅使用文本框而不使用输入数字类型来实现此目的。 解决方法
您可以使用angular2指令。
Plunkr
import { Directive,ElementRef,HostListener,Input } from '@angular/core'; @Directive({ selector: '[OnlyNumber]' }) export class OnlyNumber { 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 || e.metaKey)) || // Allow: Ctrl+C (e.keyCode === 67 && (e.ctrlKey || e.metaKey)) || // Allow: Ctrl+V (e.keyCode === 86 && (e.ctrlKey || e.metaKey)) || // Allow: Ctrl+X (e.keyCode === 88 && (e.ctrlKey || e.metaKey)) || // 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(); } } } } 并且您需要在输入中将指令名称作为属性编写 <input OnlyNumber="true" /> 不要忘记在模块的声明数组中编写指令。 通过使用正则表达式,您仍然需要功能键 export class OnlyNumber { regexStr = '^[0-9]*$'; constructor(private el: ElementRef) { } @Input() OnlyNumber: boolean; @HostListener('keydown',['$event']) onKeyDown(event) { let e = <KeyboardEvent> event; if (this.OnlyNumber) { if ([46,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+V (e.keyCode == 86 && e.ctrlKey === true) || // Allow: Ctrl+X (e.keyCode == 88 && e.ctrlKey === true) || // Allow: home,don't do anything return; } let ch = String.fromCharCode(e.keyCode); let regEx = new RegExp(this.regexStr); if(regEx.test(ch)) return; else e.preventDefault(); } } } (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |