有几个技巧可以在移动的设备上为HTML 5输入显示不同的键盘(即<input>
标签)。
例如,一些在Apple的网站上记录,配置Web视图的键盘。
这些对于可用性来说非常好,但是当涉及到输入国际邮政编码(主要是数字,但允许字母)时,我们就剩下一些糟糕的选择了。大多数人建议使用pattern="\d*"
技巧来显示数字键盘,但这不允许字母输入。type="number"
输入类型显示常规键盘,但转换为数字布局:
的
这在iOS设备上运行良好,但它使Chrome认为输入必须是一个数字,甚至改变了输入的行为(向上/向下递增和递减值)。
的
有没有办法让iOS默认为数字布局,但仍然允许字母数字输入?
基本上,我希望type="number"
的iOS行为,但我希望字段的行为像桌面浏览器上的常规文本字段。这可能吗?
更新:
嗅探iOS的用户代理并使用type="number"
输入类型不是一种选择。type="number"
不适用于字符串值(如邮政编码),并且它具有其他副作用(如剥离前导零,逗号分隔符等),使其不太适合邮政编码。
9条答案
按热度按时间sbdsn5lh1#
这样行吗?
超文本标记语言:
字符串
这应该会给予你在Android/iOS手机浏览器上提供漂亮的数字键盘,在桌面浏览器上禁用浏览器表单验证,不显示任何箭头微调器,允许前导零,并允许在桌面浏览器上使用逗号和字母,以及在iPad上。
Android / iOS手机:
x1c 0d1x的数据
桌面:
的
iPad:
的
kxxlusnw2#
浏览器目前没有合适的方式来表示数字代码,如邮政编码和信用卡号码。最好的解决方案是使用
type='tel'
,它将为您提供一个数字键盘,并能够在桌面上添加任何字符。输入
text
和pattern='\d*'
会给予你一个数字键盘,但只在iOS上。HTML5.1中有一个名为
inputmode
的属性提案,它允许您指定键盘,而不管类型如何。目前没有任何浏览器支持。我还建议看看Webshim polyfill库,它有一个polyfill method用于这些类型的输入。
wljmcqd83#
谷歌搜索找到了this Stackoverflow question。
超文本标记语言
字符串
JavaScript
型
输入类型在表单可以被验证之前被切换,显示正确的键盘而不会弄乱值。如果你只想让它在iOS上运行,你可能必须使用用户代理。
Stackoverflow on detecting iOS的
dojqjjoe4#
在iOS 11中更新了这个问题。您可以通过简单地将pattern属性(
pattern="[0-9]*"
)添加到任何数字类型的输入来获得数字键盘。以下内容按预期工作。
字符串
这也行得通。
型
@davidelrizzo发布了部分答案,但来自@Miguel瓜尔多和@turibe的评论给予了更全面的情况,但很容易错过。
gopyfrb35#
这将使ios键盘的数字侧默认显示,并保持切换到字母侧的能力。当html输入类型更改时,设备会更改键盘以匹配适当的类型。
字符串
的数据
备用演示:http://jsfiddle.net/davidcondrey/dbg1L0c0/3/embedded/result/
如果你想要大的数字格式键盘(电话风格),你可以相应地调整代码,它仍然工作:
型
的
628mspwn6#
您可以使用名为inputmode=“numeric”,inputmode=“decimal”的原生HTML API属性。(这是实现它的首选方式)您可以在MDN here上阅读有关输入模式的更多信息
字符串
z5btuh9x7#
试试这个:
字符串
我知道这是非常黑客的方式,但这显然是工作。
我还没有在Android设备上测试过。
请注意,这可能会导致一个小明显的毛刺时,
$this.attr('type', 'number')
,因为这重置值时,input
有非数字字符。基本思想是从this answer偷来的:)
bvn4nwqk8#
第一个月
上面已经为我工作了几年。我所说的工作,是指在移动的设备上,当
input
接收焦点时,会显示一个数字虚拟键盘。在iOS设备上,键盘允许用户输入数字、小数和字符。我的键盘事件处理程序插入千位分隔符,并且通过验证没有问题,因此我假设用户也可以键入逗号。可以输入负值,所以连字符是允许的,尽管我在iOS键盘上没有看到连字符。nnsrf1az9#
为什么不检查HTTP请求的头部(用户代理),并将数字布局提供给iOS设备,同时将字母数字布局提供给其余设备?