在 iPhone iOS/Safari 上显示 HTML 输入类型编号的缺陷 [英] Display flaw with HTML input type number on iPhone iOS/Safari

问题描述

我想在移动应用程序上使用 HTML input type="number"，以便向更智能的手机(Android、iPhone 和其他一些手机)表明，数字键盘对用户来说比普通键盘更有趣一.这很好用.

所以，我这里有这段 HTML:

<h3>type="number"</h3><输入类型=数字"类=输入数字"/><h3>type="text"</h3><输入类型=文本"类=输入文本"/>

这里应用的重要 CSS 元素是:

输入{高度:2em；填充:0.2em 0.5em；宽度:100%；/* 避免 iPhone 圆角 */边框:1px 实心#afb7c1；边框折叠:折叠；边界半径:0 0 0 0；}.输入号码{文本对齐:右；}

应该这样呈现:

以上是从 iOS 4.1 截取的屏幕截图，当时世界还不错.同样在 Android 手机上，一切正常.但是看看 iOS 4.2、4.3 上发生了什么:

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

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

解决方案

虽然 vincicat 的解决方案(之前已被赏金接受)似乎一开始有效，但它揭示了 Webkit 浏览器中的另一个渲染缺陷.在 10 次页面刷新中有 2 次，输入以零宽度呈现，当放入 <td> 并使用 width: 100%... 设置样式时p>

在这里找到了一个更好的解决方案(对于我的用例):

在输入类型=数字"时禁用 webkit 的旋转按钮;?

它由以下 CSS 样式组成:

input[type=number]::-webkit-inner-spin-button,输入[类型=数字]::-webkit-outer-spin-button {-webkit 外观:无；边距:0；}

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

I want to use HTML input type="number" on a mobile application, in order to indicate to the smarter mobile phones (Android, iPhone and some others), that the numeric keyboard is more interesting for the user than the normal one. This works nicely.

So, I have this piece of HTML here:

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

The important CSS elements applied here are:

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;
}

Which should render like this:

The above is a screenshot taken from iOS 4.1, where the world was still OK. Also on Android phones, everything works fine. But check out what happens on iOS 4.2, 4.3:

All of a sudden, the number field is a bit less wide, almost as though the iPhone wants to make room for that useless spinner that appears on some browsers when the input has type="number".

Is anyone aware of such an issue? How did you fix it? Or work around it? Is there any other way to make mobiles prefer the numeric keyboard? Or is there some proprietary css style that I can apply to undo this additional right margin?

解决方案

While vincicat's solution (previously accepted with the bounty) seemed to work at first, it revealed yet another rendering flaw in the Webkit browser. In 2 out of 10 page refreshes, the input was rendered with zero width, when put in a <td> and styled with width: 100%...

A better solution (for my use-case) was found here:

Disable webkit's spin buttons on input type="number"?

It consists of these CSS styles:

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

Interesting addition: I've found the <input type="number"/> field very badly flawed in Blackberry's WebKit browsers. It seems to be the source of browser crashes. Having said this, we're not using that HTML 5 feature any longer...

这篇关于在 iPhone iOS/Safari 上显示 HTML 输入类型编号的缺陷的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！