achu
achu

Reputation: 797

add dash after three characters in input type number

In my angular project, I had input type number I need to add a dash after three characters. if add input type number is not working for me if add input type text its working fine.

<input type="number" id="bank-code" (keyup)="onKey($event.target.value)" [value]='value' maxlength="7" required />

onKey(event){
  var ele = event.split('-').join('');
  if(ele.length > 0){
    ele = ele.match(new RegExp('.{1,3}', 'g')).join("-");
  }
  this.value = ele;
}

Upvotes: 1

Views: 1677

Answers (1)

Sebastian Kaczmarek
Sebastian Kaczmarek

Reputation: 8515

Input type number does not allow non-numeric characters (because it's type=number). Notice you can input e character - it's because e is a valid number.

Try to use input type tel with pattern attribute, e.x.:

<input id='phone-num' type='tel' pattern="[0-9\-]+">

Upvotes: 1

Related Questions