javascriptandroidruby-on-railshtmltwitter-bootstrap

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


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">

screenshot from my phone

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?


Solution

  • 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