HTML text input allows only numeric input in angular 2

Question

html file

<input type="text" size="10" onkeypress="return numbersOnly($event)">

component.ts

public numbersOnly(event) {
  return event.charCode >= 48 && event.charCode <= 57;
}

I don't why my code not work! Please help me. Thank you very much.

`(keypress)="eventHandler($event)"` is the standard event handler — Z. Bagley, Jan 26 '18 at 03:00

score 2 · Answer 1 · answered Jan 26 '18 at 04:10

use the Angular DOM event emitter keypress

(keypress)="eventHandler($event)"

Is the standard event handler. You can implement a method this way.

It's also useful to note that all the HTML5 standard DOM event emitters work this way in Angular, onthisevent -> thisevent e.g. onkeypress -> (keypress), onblur -> (blur) etc.

score 1 · Answer 2 · answered Jan 26 '18 at 02:43

1

Why cant you just change the type as number?

<input type="number" size="10" >

answered Jan 26 '18 at 02:43

Sajeetharan

216,225
63
350
396

My project request type is number. – nguyenhuyenag Jan 26 '18 at 02:46
i dont understand – Sajeetharan Jan 26 '18 at 02:47
@Nguyenhuyen_AG if you need a directive look this answer https://stackoverflow.com/questions/41465542/angular2-input-field-to-accept-only-numbers – Sajeetharan Jan 26 '18 at 03:53

score 1 · Answer 3 · answered Jan 26 '18 at 05:06

1

what is the point of using type="text" if you want to type number.If you only need to type number use type="number" here you don't want to write any function to restrict keys.use as below

<input type="number" size="10" >

answered Jan 26 '18 at 05:06

Thusila Bandara

285
4
22

score 0 · Answer 4 · answered Jan 26 '18 at 02:53

0

<input type="text" onkeypress='return event.charCode >= 48 && event.charCode <= 57'>
</input>

or

as Sajeetharan mentioned, HTML5 now also support input with type number

answered Jan 26 '18 at 02:53

Asura

859
5
15

I know your solution but I want create function, because in my project have many input number. Thank you. – nguyenhuyenag Jan 26 '18 at 02:56

HTML text input allows only numeric input in angular 2

4 Answers4