Forum Academy Marketplace Showcase Pricing Features

Negative numbers on iOS keyboard

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:

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:

  1. Enable html IDs
  2. Give your input element a name, in my case I called it “negativeinput” Screen Shot 2020-08-22 at 9.00.17 AM
  3. 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 :slight_smile:

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!

1 Like

Great! Thanks for sharing !! :ok_hand:t2:

1 Like

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