如何在 HostListener 输入操作中防止 Default()

Posted 2023-02-22

【中文标题】如何在 HostListener 输入操作中防止 Default()

【英文标题】：How to preventDefault() in HostListener Input action

【发布时间】：2018-10-05 22:18:28

【问题描述】：

我正在尝试编写一个指令，限制用户在输入文本控件中仅输入数字字符。

@Directive(
  selector: '[numericControl]'
)
export class NumericControlDirective 

    contructor(
        private el: ElementRef,
    ) 

    @HostListener('input', ['$event'])
    onInput(e: any) 
        if (e.which < 48 || e.which > 57) 
            e.preventDefault();
        
    

用法

<input type="text" placeholder="Volume" numericControl />

但它不起作用，有人遇到过这个问题吗？

【参考方案1】：

使用键盘事件类型 - keydown 或 keypress：

@HostListener('keydown', ['$event'])
onInput(e: any) 
  if (e.which < 48 || e.which > 57) 
      e.preventDefault();
  

【讨论】：

您也可以在您的情况下使用input[type=number] :) 更好，因为它只会在手机/平板电脑上显示数字键盘。

@popStart keydown 甚至阻止我使用箭头键、退格和删除，所以我将其更改为 keypress 你的想法仍然有效

@Yanis-git 是的，非常感谢，但我的情况不是这样 :)

我明白了，很高兴看到您在这里找到了解决方案 :) 编码愉快。

【参考方案2】：

你也可以使用

@HostListener('keydown', ['$event']) onKeyDown(event) 
    let e = <KeyboardEvent>event;
    if (e.which < 48 || e.which > 57) 
        e.preventDefault();