Angular2 - 输入字段只接受数字 [英] Angular2 - Input Field To Accept Only Numbers
问题描述
我有以下的HTML输入:
In Angular2, how can I mask an input field(textbox) such that it accepts only numbers and not alphabets?
在Angular2中,如何屏蔽输入字段(文本框),使其只接受数字而不是字母? p>
I have the following HTML input:
<input type="text" *ngSwitchDefault class="form-control" (change)="onInputChange()" [(ngModel)]="config.Value" focus)="handleFocus($event)" (blur)="handleBlur($event)"/>
以上输入是一个通用文本输入,可以用作简单文本字段或作为
The above input is a generic text input which may either be used as a simple text field or as a numeric field, (for example to show the Year).
使用angular2,我该如何使用相同的输入控件并在此字段上应用某种过滤器/掩码,这样它只接受数字?
我有什么不同的方式可以实现这一点?
Using angular2, how can I use the same input control and apply some sort of filter/mask on this field, such that it accepts only numbers? What are the different ways I can achieve this?
注意:我需要仅使用文本框而不使用输入数字类型。 / strong>
Note: I need to achieve this using only textbox and not using input number type.
推荐答案
您可以使用angular2指令。 Plunkr
You can use angular2 directives. 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();
}
}
}
}
和您需要在您的输入中将指令名称编写为属性
and you need to write the directive name in your input as an attribute
<input OnlyNumber="true" />
不要忘记在您的模块的声明数组中写入您的指令。
don't forget to write your directive in declarations array of your module.
通过使用正则表达式,您仍然需要功能键
By using regex you would still need functional keys
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, 8, 9, 27, 13, 110, 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, end, left, right
(e.keyCode >= 35 && e.keyCode <= 39)) {
// let it happen, 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();
}
}
}
这篇关于Angular2 - 输入字段只接受数字的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!