时间戳

首页 > 解决方案 > 输入类型号限制长度并允许 + 符号

html - 输入类型号限制长度并允许 + 符号

问题描述

我正在尝试创建一个以国家代码作为输入的框。我想限制用户只能输入 3 个开头带有 + 号的数字。我设法将长度限制为 3，但我无法在输入框中输入“+”。我不知道该怎么做。请帮助。提前致谢。我正在尝试的是用户只能输入 +123 或 +345。他无法输入的任何其他模式。这是我所做的： 

<input type="number" [(ngModel)]="phnNumber" oninput="this.value=this.value.slice(0,this.maxLength)" maxlength="3">

标签： htmlregexangular

解决方案

尝试使用(onkeypress)事件并处理“+”符号。的十进制 ASCII 码+是 43：

<input type="number" 
    [(ngModel)]="phnNumber" oninput="this.value=this.value.slice(0,this.maxLength)" 
    (keypress)="isNumberKey($event)
maxlength="3">

打字稿：

isNumberKey(event)
{
      console.log(event.which)
      var charCode = (event.which) ? event.which : event['keyCode']
      if (charCode != 43 && charCode > 31 && (charCode < 48 || charCode > 57))
          return false;
      return true;
}

此外，默认情况下，maxLength不适用于type="number". 但是，您可以使用pattern属性仅允许数字，然后使用属性设置输入类型的最大长度maxLength：

<input 
    type="text" 
    pattern="\d*" 
    maxlength=3
    (keypress)="isNumberKey($event)" 
>

StackBlitz 的工作示例。

更新：

要+在数字的开头添加：

HTML：

<input 
[(ngModel)]="test"
type="text" 
pattern="/^\+[0-9]{2}$/" 
maxlength=3
(keypress)="isNumberKey($event)" 
>

打字稿：

test:number;

isNumberKey(event)
{
    console.log(event.which)
    var charCode = (event.which) ? event.which : event['keyCode']
    if (charCode != 43 && charCode > 31 && (charCode < 48 || charCode > 57))
       return false;

    if(this.test && this.test.toString() && this.test.toString().length >0 
        && charCode == 43)      
    return false;

    return true;

}

StackBlitz 的工作示例，您无法+在最后一个位置插入。

推荐阅读