Negative numbers on iOS keyboard

zenter · 2020-08-22T15:04:33.701Z

I’ve got one input field in my app that can be either a negative or positive number. Long backstory here, but found out that iOS handles number inputs poorly. You can see here on an iOS device:

inputmodes.com

Inputmodes - Test inputs

Test sandbox for inputmode: decimal, email, verbatim, none, numeric, search, tel, text and url

Input elements go off of the inputmode attribute to determine if they should show the regular keyboard or the numeric keyboard. Essentially there is no simplified version of the keyboard on iOS that includes a negative operator. Instead it looks something like this (with one variation including a period for decimals):

Screen Shot 2020-08-22 at 8.55.27 AM

So in order to allow negative values to be input on iOS you’ll need to change the inputmode. Changing the type of data messes up validation so you don’t want to go that way.

Here are the steps:

Enable html IDs
Give your input element a name, in my case I called it “negativeinput”
Then add a bit of js/html to change the input’s inputmode after pageload.

<script>
function fixios() {
var element = document.getElementById('negativeinput').setAttribute("inputmode", "url");
}
</script>

<body onload="fixios()">

This forces the mode of the keyboard to be of a type that doesn’t allow spaces (url) which will show a regular keyboard on both Android and iOS. Not ideal, but it gets it done. Could probably make this conditional on platform but didn’t care that much

One nice thing is that there’s other validation from the standard input so you won’t be able to type any letter characters.

That’s it!

juancamilovasquezard · 2020-08-22T17:36:27.155Z

Great! Thanks for sharing !!

ilangutman · 2021-08-06T00:24:03.468Z

Just in case anyone is running into an issue where this solution works on the first page load, but then not on subsequent refreshes, solution here - Changing inputmode after page load only works once