这个问题可以通过使用正则表达式来解决。我们可以在指令中定义一个正则表达式来检查输入是否只包含数字。如果输入不符合正则表达式,则将其删除。
以下是这个解决方法的代码示例:
import { Directive, HostListener } from '@angular/core';
@Directive({
selector: '[appDigitsOnly]'
})
export class DigitsOnlyDirective {
@HostListener('input', ['$event']) onInputChange(event) {
const initialValue = event.target.value;
event.target.value = initialValue.replace(/[^0-9]/g, '');
if (initialValue !== event.target.value) {
event.stopPropagation();
}
}
}
在这个代码中,我们使用@HostListener
装饰器来监听输入事件。当输入事件发生时,我们获取输入的值,然后使用正则表达式/[^0-9]/g
来检查输入的值是否只包含数字。如果输入的值包含非数字字符,我们将其删除。
需要注意的是,我们还在上面的代码中添加了一个检查,以确保我们不会在删除非数字字符之后再次触发输入事件。这可以避免浏览器陷入死循环。
使用此指令,可以将其应用于任何输入元素中,例如: