CODEWITHSUNDEEP
htmlregexangular
rock11
rock11

Reputation: 758

input type number restrict length and allow + sign

I am trying to create a box that takes the country code as input.I want to restrict the user to only enter 3 numbers with a + sign in the beginning. I managed to restrict the length to 3 but I'm unbale to type '+' in the input box.I don't know what to do.Please help.Thanks in advance. What I'm trying is that user can only enter +123 or +345.Any other pattern he can't enter. Here's what I've done: 

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

Upvotes: 3

Views: 265

Answers (4)

StepUp
StepUp

Reputation: 38094

Try to use (onkeypress) event and handle the '+' symbol. The decimal ASCII code of + is 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;
}

In addition, by default, maxLength is not working for type="number". However, you can use pattern property to allow only digits and then set maximum length of your input type by using maxLength property:

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

The work example at StackBlitz.

UPDATE:

To add + just in the beginning of the number:

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.

Upvotes: 2

KGP
KGP

Reputation: 350

Try this and it seems to be working the way you wanted

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

Upvotes: 1

gavgrif
gavgrif

Reputation: 15499

Firstly - the reason you cant type "+" is because this is a type="number" field - but more importantly - you do not need to type the "+" at all - you can simply present that as part of the input.

You can have a span with the "+" and position it absolutely so that it appears that it is in the input, but is not actually in it. This means that you don't need the slice as you have it.

Note you will also need to give padding to the input so that the actual numbers don't clash. Also - you will need the input to be wrapped in a div that has position: relative to allow the absolute placement of the indicator.

I have also added a value to this input to demonstrate it - since I didn't have the angular to add to your example.

.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>

Upvotes: 0

Incognita
Incognita

Reputation: 99

I'll say use a select drop for this task but if you want to you can use a regex matching for this. 

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

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

Upvotes: 2

Related Questions