相关疑难解决方法(0)

我有一个主要面向移动用户的网站,但桌面也是如此.

在Mobile Safari上,使用<input type="number">效果很好,因为它会在输入字段上显示数字键盘,这些键盘应该只包含数字.

但是在Chrome和Safari中,使用数字输入会在字段的右侧显示旋转按钮,这在我的设计中看起来像垃圾.我真的不需要按钮,因为当你需要写一个像6位数字的东西时它们是无用的.

是否有可能禁用此功能-webkit-appearance或其他一些CSS技巧？我试过没有太多运气.

在Firefox 28上,我使用的<input type="number">作品非常棒,因为它会在输入字段上显示数字键盘,这些键盘应该只包含数字.

在Firefox 29中,使用数字输入在字段的右侧显示旋转按钮,在我的设计中看起来像垃圾.我真的不需要按钮,因为当你需要写一些类似6~10位数字的东西时它们是无用的.

是否可以使用CSS或jQuery禁用它？

我想总是显示输入"数字"字段的向上/向下箭头.这可能吗？到目前为止,我没有运气...

http://jsfiddle.net/oneeezy/qunbnL6u/

HTML:

<input type="number" />

CSS:

input[type=number]::-webkit-inner-spin-button, 
input[type=number]::-webkit-outer-spin-button {  

   -webkit-appearance: "Always Show Up/Down Arrows";

}

在Google Chrome中,input[type=number]旋转按钮仅在悬停时显示.

这是我使用的代码:

<input type="number" value="1" min="1" max="999" />

有没有办法总是显示旋转按钮？

我一直在阅读许多其他问题,例如[1] [2] [3],但问题仍然存在.

我需要找到"最干净"的方式来input获得移动设备的HTML 并尊重所有这三个规则:

1. 主要适用于数字,整数或浮点数

2. 显示移动设备上的数字小键盘,适用于Android版Chrome和适用于iOS的Safari,没有奇怪的额外按键

   

3. 完全尊重HTML5规则(由W3验证器测试)

我试过了什么？

我一直在讨论这些解决方案,这两个主题都没有累积地尊重上述三条规则.

解决方案1

<input type="text" pattern="\d*" />

此解决方案尽管在iOS中工作并且完成了由w3验证器测试的HTML规则,但在Chrome Android中提供了带有QWERTY键盘的完整键盘.

解决方案2

<input type="number" pattern="\d*" />

此解决方案适用于iOS和Android Chrome系统,显示两个系统上的数字键盘,但它会抛出HTML验证错误

仅当输入类型为电子邮件,密码,搜索,电话,文本或URL时,才允许使用属性模式.

解决方案3

<input type="number" />

此解决方案通过HTML测试,在Chrome上显示不错,但在iOS键盘上显示了几个不需要的密钥

解决方案4

我看到许多开发人员使用此解决方案

<input type="tel" />

但是经过Android Chrome测试,它不允许使用点符号(.),并且键有字母,这是多余的.

我用了一个简单的html

<input type="number">

它显示一个带有向上和向下箭头的文本框,但箭头不起作用.可以使用键盘和鼠标滚动上的箭头递增/递减该值,但是当我单击任何箭头时,似乎单击向下箭头并且框中的值保持不变.请建议我该怎么做!

我有一个主题基于的应用程序Metro UI CSS隐藏了(我认为)Chrome在使用时添加的漂亮和有用的微调器<input type="number" />.

我试图"覆盖"这个规则,但我无法弄清楚我有什么价值来设置它:

input[type=number]::-webkit-outer-spin-button, 
input[type=number]::-webkit-inner-spin-button {
    -webkit-appearance: initial !important;
}

不起作用(见FIDDLE).

恢复它们的正确值是什么？

PS:我试图避免仅从基本CSS中删除规则以避免更新问题...