html - 在 iPhone iOS/Safari 上显示 HTML 输入类型编号的缺陷

Question

我想在移动应用程序上使用 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 截取的截图，当时世界还不错。同样在 Android 手机上，一切正常。但看看 iOS 4.2、4.3 上发生了什么：

突然之间，数字字段变得不那么宽了，就好像 iPhone 想要为输入类型 =“数字”时出现在某些浏览器上的无用微调器腾出空间。

有人知道这样的问题吗？你怎么修好它的？或者解决它？有没有其他方法可以让手机更喜欢数字键盘？或者是否有一些专有的 css 样式可以应用来撤消这个额外的右边距？

Answer 1

Actually the questioner himself is very close to the answer as he knows it is the spinner 's fault, and luckily webkit allow users to control it by CSS:

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

Source: REMOVE SPIN CONTROL ON INPUT TYPE=NUMBER IN WEBKIT

Live demo: http://jsbin.com/aviram/5/

Hope it help.

Answer 2

虽然 vincicat 的解决方案（之前被赏金接受）起初似乎有效，但它揭示了 Webkit 浏览器中的另一个渲染缺陷。在 10 次页面刷新中的 2 次中，输入以零宽度呈现，当放入 a<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;
}

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

Answer 3

不确定这是否有帮助，但尝试将这些行添加到inputcss

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

Answer 4

我无法访问较旧的 iOS 设备来对其进行测试，但这适用于现代 iOS，同时 Google Chrome 也开始不服从 width: ，因此这解决了这两个问题：

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