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

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/21677695/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-10-21 20:00:42  来源:igfitidea点击:

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

javascriptandroidruby-on-railshtmltwitter-bootstrap

提问by Don Giulio

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.

我正在我的手机(带 chrome 的三星 Galaxy Note II)上测试我的应用程序,但我在输入数字字段时遇到了问题。

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.

在我的应用程序中,这些字段可以接受负数,而在浏览器上这一切都很好,因为我有-按钮和用于选择数字的箭头滑块(来自 html5)。

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.

我的应用程序使用带有 jquery 的 twitter bootstrap 2.3.2,我不知道如何解决这个问题。

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?

在图像中,您可以看到红色字段如何标记为错误,因为它需要为负数,但我的键盘不允许我插入符号。包括-标志。任何线索?

回答by DarkWanderer

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

这个问题是三星定制键盘特有的——对于那些认为自己比所有人都聪明的供应商来说,万岁。这是此问题在工作中的另一个示例

回答by bendytree

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

1) 谷歌键盘

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

用户可以安装不同的键盘(如Google 键盘)。显然,让人们安装一些东西并不理想。

enter image description here

在此处输入图片说明

2) Negate Button

2) 否定按钮

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

正如@Cris 已经建议的那样,添加一个取消该值的按钮。如果你有屏幕空间那就太好了。

3) Double Dot Trick

3)双点技巧

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

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

回答by Cris

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.

然后挂钩复选框的 onchange 事件,以便更新数字视图以反映所选符号。

回答by craigmc_2000

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.

如果您使用 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">