I’ve been working on training logger app as a side-project for the past six months. As you’d expect, such an app requires numeric inputs.
When you use autocomplete in any code editor, the default type for the input element is text:
<input type="text" />An HTML input element with type of number only accepts numeric inputs. Try typing letters inside this numeric input field:
You can’t.
HTML input elements with the type of text, however, accepts both text and numbers. Try typing both numbers and letters inside this text input field:
Yay, it works!
When I initially declared the input for reps and weight in my app, I didn’t change the default input type from text to number. I didn’t even think about it. When testing on a desktop computer, typing numbers is easy, so it didn’t bother me.
But as soon as I tested my app on my iPhone 6, it became obvious why you might as well use the correct input type from the beginning.
If your input element’s type is set to text, and you click on that input field, at least iPhones, (I suspect it’s similar on Android) then your native keyboard will pop up. As if you were writing a text message to someone.
Like this:
Now, this native keyboard does give you access to numbers, but first, you have to click on the 123 button. This adds an unnecessary step.
For an input field where the sole purpose is to add the number of reps and weight lifted, it only makes sense to pop up the numeric keyboard on smartphones.
To do that, you simply specify that you want your input element to accept numeric input:
Like this:
<input type="number" />And the result (on iOS devices):
And that’s all there is to it!
