iPhone iOS/Safari 中 HTML 输入类型为数值的显示问题

Question

iPhone iOS/Safari 中 HTML 输入类型为数值的显示问题

4

我希望在移动应用程序中使用HTML的input type="number"，以便向智能手机（Android，iPhone和部分其他手机）指示数字键盘对用户比常规键盘更有吸引力。这个功能效果很好。

所以，我有这样一段HTML代码：

<h3>type="number"</h3>
<input type="number" class="input-number"/>
<h3>type="text"</h3>
<input type="text" class="input-text"/>

这里应用的重要CSS元素包括：

input {
  height: 2em;
  padding: 0.2em 0.5em;
  width: 100%;

  /* avoid iPhone rounded corners */
  border: 1px solid #afb7c1;
  border-collapse: collapse;
  border-radius: 0 0 0 0;
}

.input-number {
  text-align: right;
}

以下是iOS 4.1上的屏幕截图，应该呈现为这样：

enter image description here

在Android手机上一切正常。但是看看iOS 4.2、4.3上发生了什么：

enter image description here

突然间，数字输入框变得略微狭窄了，似乎iPhone想要为某些浏览器中当输入使用type="number"时出现的无用微调器腾出空间。

有人知道这个问题吗？您是如何解决的？还是通过其他方法让移动设备优先使用数字键盘？或者有没有一些专有的CSS样式可以应用来撤销此额外的右边距？

- Lukas Eder

4个回答

6

尽管vincicat的解决方案（之前获得了悬赏奖励）起初似乎有效，但它揭示了Webkit浏览器中的另一个渲染缺陷。在10次页面刷新中有2次，当把输入框置于<td>中并使用width: 100%样式时，它的宽度为零...

这里发现了一个更好的解决方案（适用于我的使用情况）：如何禁用input type="number"的 Webkit旋转按钮？该解决方案包括以下CSS样式：

input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

有趣的补充：我发现在黑莓的 WebKit 浏览器中，<input type="number"/> 字段存在严重缺陷。它似乎是浏览器崩溃的源头。话虽如此，我们不再使用该 HTML5 功能了...

- Lukas Eder

谢谢你的问题和答案。它对我很有帮助，因为我在Blackberry上遇到了类似的问题。 - Pablo

3

不确定这是否有帮助，但请尝试将以下行添加到 css中

-webkit-box-sizing: border-box;
box-sizing: border-box;

- julesj

'-webkit-appearance: none;' 是什么意思？ - julesj

我之前已经尝试过那个了。那样做可以去掉漂亮的阴影，但是边距还在 :-/ - Lukas Eder

0

我没有旧版iOS设备来测试，但这在现代iOS上运行良好，同时Google Chrome也开始不遵守width属性，所以这个修复方法可以解决两个问题：

input[type=number] {
  max-inline-size: none; /* chrome 71 */
  max-width: unset; min-width: unset; /* iOS12 */
}

- Wil

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- vincicat · Accepted Answer

实际上，提问者自己非常接近答案，因为他知道问题出在旋转器上，幸运的是，webkit允许用户通过CSS控制它：

input[type="number"]::-webkit-outer-spin-button { display: none; }

来源：去除Webkit中input type=number的旋钮控件

在线示例：http://jsbin.com/aviram/5/

希望对您有所帮助。