Html 输入类型编号限制长度并允许+；签名

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

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

---

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

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

您可以使用带“+”的span，并将其绝对定位，使其看起来在输入中，但实际上不在输入中。这意味着你不需要像现在这样的切片

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

注意，您还需要对输入进行填充，以便实际数字不会发生冲突。另外，您需要将输入包装在一个div中，该div具有position:relative，以允许指示器的绝对位置

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

我还为这个输入添加了一个值来演示它——因为我没有添加到您的示例中的角度

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

。表单组{
位置：相对位置；
}
.表格组输入{
左侧填充：20px；
}
.指标{
位置：绝对位置；
顶部：2个；
左：6px；
}

+

尝试使用

（onkeypress）

事件并处理“+”符号。

+

的十进制ASCII码是43：

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

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

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

更新：

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

要在数字的开头添加

+

：

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

HTML:

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

打字稿：

<input type="number" [(ngModel)]="phnNumber" oninput="this.value=this.value.slice(0,this.maxLength)" 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;
}

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;

测试：编号；
isNumberKey（事件）
{
console.log（event.which）
var charCode=（event.which）？event.which:event['keyCode']
如果（charCode！=43&&charCode>31&&charCode<48|charCode>57））
返回false；
如果（this.test&&this.test.toString（）&&this.test.toString（）。长度>0
&&字符代码==43）
返回false；
返回true；

}

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

---

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

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

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

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

---

试试这个，它似乎是你想要的工作方式

<input type="number" [(ngModel)]="phnNumber" oninput="this.value=this.value.slice(0,this.maxLength)" maxlength="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}">

我无法在输入框中输入“+”。在此框中，我可以在任何位置输入+。我只想在数字的开头添加+，我仍然可以enter@rock11我已经检查过了，它可以工作：）您想在每个国家/地区代码之前添加前缀“+”并将国家/地区代码限制为3位吗？这需要进一步编辑，所以它不接受第一位后面的“+”。目前，它在所有位置都接受“+”