input type=number not possible to insert negative numbers on mobile phone

Question

I'm testing my app on my mobile phone (samsung galaxy note II with chrome) and I have a problem with the numeric input fields.

In my app these fields can accept negative numbers, and on the browser it's all fine as I have the - button and also the arrow sliders (from html5) for choosing the number.

On the phone though the sliders are not rendered, and the browser recognise the input type=number, and just renders a simplified numeric keyboard, which doesn't contain the - sign, so I didn't see a way to insert the negative number I wish.

My app uses twitter bootstrap 2.3.2 with jquery, I'm not sure how to solve this problem.

here's the code for one of my input fields that work fine on my computer, but can't use them properly on my phone:

<input class="input-mini" data-type="distance_price" id="distance" label="false" name="distance" step="0.1" type="number" max="-0.1">

in the image you can see how the field in red is marked as wrong because it needs to be negative, but my keyboard doesn't let me insert symbols. including the - sign. any clue?

Skiagraph

You should always deal with telephone numbers as strings rather than as actual numbers, as they are a string of digits (and possibly other symbols such as +) rather than numbers. I know nothing of android development but if you change the data type to string, does that help? – Sessile

@Max Williams: Have you ever heard about negative telephone numbers? Maybe you should read this question again... – Bonkers

Just tested it on Nexus 4 with Android 4.4.2 and Chrome Version 32.0.1700.99 with Goggle Standard Keyboard and Swiftkey Keyboard, both works fine. Maybe it's a problem on "old" devices with "older" Android/Chrome Versions? If it turns out this is the problem, then you should maybe go with @MaxWilliams Workaround using a plain string input field. – Bonkers

Works for me on Nexus. It seems this is a deficiency with certain types of Android browsers, you could always implement a Javascript fallback for the sliders. – Crossed

@morten, My phone is pretty new, and it's for sure newer than what 80% of smart phone users have, it must be a specific combination of phone/browser/os, which I need to deal with, otherwise I lose such users. maybe yeah, that could be a solution that on phones these fields become text, but then I will have to implement locally all the logic to verify the fields. – Skiagraph

@jumpingcode yeah I thought of supplying with javascript, I posted the question here to understand if anyone already had this issue and how they managed it. thanks all for the support, more hints are welcome. – Skiagraph

Having the number pad soft keyboard up is nice for entering numbers, and if you want to keep it that way, maybe including a toggle for positive / negative numbers would help? Something like a simple checkbox, or a styled prefix box that when touched changes from + to - perhaps. – Housel

@MaxWilliams Input type number is for numeric values. Input type tel should specify a phone number input field. So his question is totally valid. Maybe try to add a min="" value so it sees the value can be negative? – Windsail

@Antek, thanks for your suggestion, in facts I know when the number HAS to be negative and when it HAS to be positive. that's why in my code I have set max="-0.1" do you have any hint on why setting a min would work with negative numbers? and what should I set the min value to? – Skiagraph

@dongiulio, sorry but did it solve your problem? I could not test my suggestion since I don't have a device with me. What I'm sure about is that type number allows you to set boundary values with min/max attributes. Maybe your browser looks at the min attribute to define if the minimum value (with default on 0 ) and decides to show or not to show a minus sign? – Windsail

At first I thought I was seeing this issue, but it actualy turned out to be this: #9134437 tldr; set the field to numberSigned – Kotto

Answer 1

The issue is specific to Samsung custom keyboard - hooray to vendors who think they're smarter than everyone. Here is another example of this issue at work

Yahweh

Answer 2

In short, there's no way to make the minus sign show up on Samsung Android numeric inputs. Here are a few workarounds I've run across:

1) Google Keyboard

The user can install a different keyboard (like Google Keyboard). Obviously not ideal to have people install something though.

2) Negate Button

As @Cris already suggested, add a button which will negate the value. If you've got the screen real estate then great.

3) Double Dot Trick

We ended up with a fairly ugly workaround where the user can press . twice and it will negate the number. Totally non-discoverable but an extra button wasn't an option for us.

https://gist.github.com/bendytree/936f6b9b4c0e10138b7e9158b5fd05d9

Carma

Answer 3

If you are still looking for a way to enter - sign using html input tag, try this

<input type="text" inputmode="numeric">

Although, this combination looks weird, it serves the purpose. You will be able to enter - sign from Samsung keyboard. You can then parse it to number if you want the user to enter only valid numerics and show validation according to that.

Knute

Applying this change allowed the numeric keypad on the Chrome browser on Samsung phone to show the minus sign (same key as 'dot', and accessed by fast double tap). That behaviour was already evident, without the above <input> directives, on the native Samsung browser (also based on Chrome, afaik). Apple device numeric keypads also supply the minus key without the above directives, so only Samsung needed this. – Bersagliere

Answer 4

Make an extra input field. A "sign" checkbox, selecting natural or negative integers.

Then hook the onchange event of the checkbox so that you update the number view to reflect the chosen sign.

Until

Answer 5

If you use the value attribute (value="-0.1") to load an initial negative value then you will have the minus sign pre-loaded for you.

<input class="input-mini" data-type="distance_price" id="distance" label="false" name="distance" step="0.1" type="number" max="-0.1" value="-1">

Affettuoso

Answer 6

If you returned here because the Double Dot Trick from above stopped working... It seems an update to how input type="number" fields are handled keeps the second "dot" from even registering as a keystroke stopping the Double Dot from working. In my case, I changed the test line in the JS to

if (lastkey === "." && (key === "." || e.originalEvent.inputType == "deleteContentBackward")){

to create the equally hacky "Dot Backspace Trick"

Yttria

Answer 7

This is works. You need to do type to text and add inputhmode numeric. Again keyboard shows numeric with negative sembol.

 <input type="text" min="-100" inputmode="numeric">

Geodesy