Javascript 仅数字输入的邮政编码（限5）l角4/5

我想用这些数字输入，但如果我把输入类型放在文本中，我可以输入5个字符的字母数字，如果我把输入类型放在数字中，我只能输入数字，但不限于5个数字 谢谢大家

HTML

---

你可以试试这个解决方案

我已经在上创建了一个演示

html代码

OnlyNumber属性指令

从'@angular/core'导入{Directive，ElementRef，HostListener}；
@指示({
选择器：“[OnlyNumber]”
})
仅导出类编号指令{
构造函数（私有el:ElementRef）{}
@HostListener（'keydown'，['$event']）onKeyDown（事件：KeyboardEvent）{
设e=事件；
/* 
8-用于退格
9-用于制表符
13-输入
27-为了逃跑
46-删除
*/
如果（[8,9,13,27,46].indexOf（e.keyCode）！=-1||
//允许：Ctrl+A
（e.keyCode===65&（e.ctrlKey | | e.metaKey））||
//允许：Ctrl+C
（e.keyCode===67&（e.ctrlKey | | e.metaKey））||
//允许：Ctrl+V
（e.keyCode===86&（e.ctrlKey | | e.metaKey））||
//允许：Ctrl+X
（e.keyCode===88&（e.ctrlKey | | e.metaKey））||
//允许：起始、结束、左、右
（e.keyCode>=35&&e.keyCode此指令对我来说非常有效，您可以将其强制为5位数字，并排除与数字相关的字符，如句号“e”等。
我建议将输入保持为文本类型，请参见此处的推理。

角度数字指令和掩码指令
hi fabio可能重复，抱歉，我不理解您的评论。它可以工作，但不是100%，因为我可以键入禁止的特殊字符…在所有键盘中，我只能键入数字。！解决方案是什么@Krishna这对我来说很好。请为您的问题创建一个演示视频/GIF。
<input type="text" id="number" name="postalCode" placeholder="Saisissez le code postal" formControlName="postalCode" maxlength="5" class="a-textbox"  pattern="/^(([0-8][0-9])|(9[0-5]))[0-9]{3}$/" />

postalCode: new FormControl('', [Validators.maxLength(5)]),

<input type="text" OnlyNumber id="number" name="postalCode" placeholder="Saisissez le code postal" formControlName="postalCode" maxlength="5" class="a-textbox" />

import { Directive, ElementRef, HostListener } from '@angular/core';

@Directive({
    selector: '[OnlyNumber]'
})
export class OnlyNumberDirective {

    constructor(private el: ElementRef) { }

    @HostListener('keydown', ['$event']) onKeyDown(event: KeyboardEvent) {
        let e = <KeyboardEvent>event;
        /* 
            8 -  for backspace
            9 -  for tab
            13 - for enter
            27 - for escape
            46 - for delete
        */
        if ([8, 9, 13, 27, 46].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();
        }
    }

    @HostListener('paste', ['$event']) blockPaste(event: KeyboardEvent) {
        this.validateFields(event);
    }
    validateFields(event) {
        setTimeout(() => {
            let numberRegEx = /^[0-9]+$/;
            if(!numberRegEx.test(this.el.nativeElement.value)){
                this.el.nativeElement.value = "";
                event.preventDefault();
            }
        }, 100)
    }
}