I want to prevent the user from typing anything other than numbers
Use yourself input
of the kind number
of HTML
The <input type="number">
defines a numeric input field .
You can also set restrictions on which numbers are accepted.
The following example displays a numeric input field, where you can enter a value from 1 to 5:
<form>
<input type="number" name="quantity" min="1" max="5">
</form>
Entry Restrictions
Here is a list of some common entry restrictions (some are new in HTML5):
disabled - Specifies that an input field should be disabled
max * - Specifies the maximum value for an input field
maxlength - Specifies the maximum number of characters for an input field
min * - Specifies the minimum value for an input field
Pattern * - Specifies a regular expression to check the input value
readonly - Specifies that an input field is read-only (cannot be changed)
required * - Specifies that an entry field is mandatory (must be completed)
size - Specifies the width (in characters) of an input field
step * - Specifies legal number ranges for an input field
value - Specifies the default value for an input field
* = HTML5
This can be seen in: https://www.w3schools.com/html/html_form_input_types.asp
Those inputs
currently comes with a spin button
to increase and reduce the value, if you want to disable them, you can do CSS
:
input[type=number]::-webkit-outer-spin-button,
input[type=number]::-webkit-inner-spin-button {
-webkit-appearance: none;
margin: 0;
}
input[type=number] {
-moz-appearance:textfield;
}
I want to prevent the user from typing anything other than numbers
– Jonnys J.