我想在移动应用程序上使用 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 样式可以应用来撤消这个额外的右边距?