CSS flexbox, grid, and javascript logic

I couldn't get around the input type problem for the screen. -If i used type="number" on the input tag, every minus sign or dot I tried to add with the keypad was "out of range or couldn't be parsed". -I used type="text" to fix this issue, but this type doesn't prevent user the use letters with the keyboard. Also it doesn't show the right keyboard on a mobile device. Any advice on that issue?