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

Question

我正在手机上（三星Galaxy Note II，并使用谷歌浏览器）测试我的应用程序，但数字输入框出现了问题。

在我的应用程序中，这些字段可以接受负数，在浏览器上一切正常，因为我有-按钮和用于选择数字的箭头滑块（来自HTML5）。

然而，在手机上，滑块没有呈现，浏览器识别输入类型=number，并只呈现一个简化的数字键盘，其中不包含-符号，因此我无法插入所需的负数。

我的应用程序使用Twitter Bootstrap 2.3.2与jQuery，我不确定如何解决这个问题。

这是一个正常工作于电脑上但无法在手机上正确使用的一个输入字段的代码：

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

从图中可以看到，红色区域被标记为错误，因为它需要是负数，但我的键盘不允许我插入符号，包括-符号。有什么提示吗？

- Don Giulio

---

在处理电话号码时，应将其视为字符串而不是实际数字，因为它们是由数字（和可能包括 + 等其他符号）组成的“字符串”，而不是数字。我对Android开发一无所知，但如果您将数据类型更改为字符串，是否有帮助？ - Max Williams

你有没有听说过“负数”电话号码？也许你应该再读一遍这个问题…… - morten.c

刚在Nexus 4上测试了一下，使用的是Android 4.4.2和Chrome版本32.0.1700.99，输入法分别为Goggle标准键盘和Swiftkey键盘，两者都能正常工作。也许这只是在“旧”的设备上或者使用“老”版本的Android/Chrome时才会出现的问题？如果最终确认是这个问题，那么你可以考虑采用@MaxWilliams的解决方案，使用一个普通的字符串输入框。 - morten.c

在我的Nexus上可以工作。看起来这是某些类型的Android浏览器的缺陷，您可以为滑块实现JavaScript回退。 - ediblecode

保持数字键盘软件键盘的打开状态有助于输入数字，如果您想保持这种方式，可以添加一个切换正负数的开关，比如一个简单的复选框或者是一个样式化前缀框，当被触摸时从“+”变成“-”。 - Lazerblade

Answer 1

这个问题只发生在三星自定义键盘上 - 真是太好了，厂商们总觉得自己比别人聪明。这里还有一个例子说明了这个问题。

- DarkWanderer

Answer 2

简而言之，在三星安卓数字输入中，没有办法使减号显示出来。以下是我遇到的一些解决方法：

1）谷歌键盘

用户可以安装不同的键盘（例如Google Keyboard）。显然，让人们安装其他东西并不理想。

2) 反转按钮

如@Cris所建议，添加一个按钮来反转值。如果你有屏幕空间的话那就太好了。

3) 双点技巧

我们最终采用了一个相当丑陋的解决方案，用户可以按两次.来反转数字。虽然完全无法被发现，但对我们来说，额外的按钮并不是一个选择。

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

- bendytree

Answer 3

如果你还在寻找一种在HTML输入标签中输入“-”符号的方法，可以试试这个。

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

虽然这个组合看起来有点奇怪，但它能达到目的。你可以从三星键盘输入“-”符号。然后，如果你希望用户只输入有效的数字并根据此进行验证，你可以将其解析为数字。

- suyashpatil

---

应用这个更改使得三星手机上的Chrome浏览器的数字键盘能够显示减号符号（与“点”键相同，通过快速双击访问）。这种行为在原生三星浏览器上已经存在，无需上述<input>指令。苹果设备的数字键盘也可以提供减号键，无需上述指令，所以只有三星需要这个更改。 - undefined

Answer 4

添加一个额外的输入框。一个“符号”复选框，选择自然数或负整数。

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

- Cris

Answer 5

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

- craigmc_2000

Answer 6

如果您因为上面的双点技巧停止工作而返回到这里... 看起来对 input type="number" 字段处理方式的更新阻止了第二个“点”被识别为按键，从而停止了双点技巧的工作。在我的情况下，我将 JS 中的测试行更改为

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

创建同样“hacky”的“点回退技巧”

- Philgo68