[英]Angular: How to allow only integer in the textbox using Directive
I am trying to create my first directive.我正在尝试创建我的第一个指令。 What I want is to simply prevent typing on a text field.
我想要的是简单地防止在文本字段上打字。
This is what I have tried:这是我尝试过的:
import { Directive, ElementRef, HostListener, Input } from '@angular/core';
import { NgControl } from '@angular/forms';
@Directive({
selector: 'input[numbersOnly]'
})
export class NumberDirective {
constructor(private _el: ElementRef) { }
@HostListener('input', ['$event']) onInputChange(event) {
event.stopPropagation();
}
}
<input type="text" ngModel numbersOnly>
But the user is still able to type.但是用户仍然可以输入。
I also tried it with event.preventDefault();
我也试过
event.preventDefault();
but that also didn't work.但这也没有用。 What am I doing wrong?
我究竟做错了什么?
You are missing the important code:)你错过了重要的代码:)
You forgot to check the valid inputs so you can use regular expression to allow the intergers:您忘记检查有效输入,因此您可以使用正则表达式来允许整数:
Directive TS Code:指令 TS 代码:
import { Directive, HostListener, ElementRef } from '@angular/core';
@Directive({
selector: 'input[numbersOnly]'
})
export class NumbersOnlyDirective {
constructor(private _el: ElementRef) { }
@HostListener('input', ['$event']) onInputChange(event) {
const val = this._el.nativeElement.value;
this._el.nativeElement.value = val.replace(/[^0-9]*/g, '');
if (val !== this._el.nativeElement.value) {
event.stopPropagation();
}
}
}
you have to listen to the keyDown event:你必须听 keyDown 事件:
import { Directive, HostListener, ElementRef } from '@angular/core';
@Directive({
selector: '[appNumbersOnly]'
})
export class NumbersOnlyDirective {
constructor(private _el: ElementRef) { }
@HostListener('keydown', ['$event'])
onKeyDown(e: KeyboardEvent) {
if (
// Allow: Delete, Backspace, Tab, Escape, Enter
[46, 8, 9, 27, 13].indexOf(e.keyCode) !== -1 ||
(e.keyCode === 65 && e.ctrlKey === true) || // Allow: Ctrl+A
(e.keyCode === 67 && e.ctrlKey === true) || // Allow: Ctrl+C
(e.keyCode === 86 && e.ctrlKey === true) || // Allow: Ctrl+V
(e.keyCode === 88 && e.ctrlKey === true) || // Allow: Ctrl+X
(e.keyCode === 65 && e.metaKey === true) || // Cmd+A (Mac)
(e.keyCode === 67 && e.metaKey === true) || // Cmd+C (Mac)
(e.keyCode === 86 && e.metaKey === true) || // Cmd+V (Mac)
(e.keyCode === 88 && e.metaKey === true) || // Cmd+X (Mac)
(e.keyCode >= 35 && e.keyCode <= 39) // Home, End, Left, Right
) {
return; // let it happen, don't do anything
}
// 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();
}
}
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.