input type=number 无法在手机上插入负数

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?

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

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

Answer 3

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.

Answer 4

如果您使用 value 属性 (value="-0.1") 加载初始负值，那么您将为您预加载减号。

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

Answer 5

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"