Question

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

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

Answer 1

我会说使用select drop来完成此任务，但是如果您愿意，可以使用正则表达式匹配。

let pattern = /^\+[0-9]{2}$/

pattern.test("099") // false
pattern.text("+99") // true

Answer 2

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

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

TypeScript：

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)" 
>

The work example at StackBlitz.

更新：

要在数字的开头添加+：

HTML：

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

TypeScript：

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;

}

The work example at StackBlitz where you cannot insert + at the last position.

Answer 3

尝试一下，它似乎可以按照您想要的方式工作

<input type="text" [(ngModel)]="phnNumber" 
  oninput="
  if(this.value.length==1 && this.value!=='+')
  {
  this.value='+'+this.value;
  } 
  else
  {
  this.value=this.value.slice(0,this.maxLength);
  }" 
  maxlength="4" pattern="[+][0-9]{3}">

Answer 4

首先-您不能键入“ +”的原因是因为这是一个type =“ number”字段-但更重要的是-您根本不需要键入“ +”-您可以将其作为一部分显示输入。

您可以在跨度上加上“ +”并将其绝对定位，以使其看起来像在输入中，但实际上不在输入中。这意味着您不需要切片就可以了。

请注意，您还需要在输入中添加填充，以免实际数字发生冲突。另外-您需要将输入内容包装在具有位置：的div中，以允许指标的绝对位置。

我还向该输入添加了一个值来演示它-因为我没有角度要添加到您的示例中。

.form-group {
  position: relative;
}

.form-group input {
  padding-left: 20px;
  }
  
.indicator { 
  position: absolute;
  top: 2px; 
  left: 6px;
}

<div class="form-group">
  <input type="number" [(ngModel)]="phnNumber" maxlength="3" value="123">
<span class="indicator">+</span>
</div>

输入类型编号限制长度并允许+号

4 个答案: