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

问题描述

我想在移动应用程序上使用HTML输入类型=数字，以便向更智能的手机（Android，iPhone和其他人）表明数字键盘对用户来说比正常更有趣一。这很好。

所以，我在这里有一段HTML：

 < H3>类型= 号 < / H3> 
< input type =numberclass =input-number/> 
< h3> type =text< / h3> 
< input type =textclass =input-text/> 
  

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

  input {
 height：2em; 
填充：0.2em 0.5em; 
宽度：100％; 
 
 / *避免iPhone圆角* / 
 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上会发生什么：

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

解决方案

虽然vincicat的解决方案赏金）起初似乎起作用，但它揭示了Webkit浏览器中的另一个渲染缺陷。在10页刷新中，当输入< td> 并且样式为 width：100％时， ...

在这里找到了一个更好的解决方案（用于我的用例）：

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

它由以下CSS样式组成：

 <$ c $ b $ input  -  [type = number] ::  -  webkit-external-spin-button {
 -webkit-appearance：没有; 
保证金：0; 
} 
  

有趣的加法： code>< input type =number/> 字段在Blackberry的WebKit浏览器中存在严重缺陷。它似乎是浏览器崩溃的根源。话虽如此，我们不再使用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屋！