我正在为我们的网站添加一些移动可用性优化.作为其中的一部分,我正在调整textfields的type属性,以便为用户提供预期数据类型的最佳输入工具.
我在触摸屏移动设备中遇到的一个问题是,当使用输入类型=“数字”时,不同操作系统上的浏览器,甚至同一操作系统上的不同浏览器,显示不同的屏幕键盘.
iOS 4.3.3(iPhone 4)上的Safari和Android 2.3.4上的Chrome包含一个小数点,但Android 2.3.4上的Firefox没有.
我尝试添加步骤属性(step =“0.1”),但在Firefox中没有任何改进.
如果我无法显示小数点,我将需要向Firefox展示完整的QWERTY键盘,这显然不会带来最佳的用户体验.它还引发了浏览器/设备嗅探的问题.我需要将QWERTY设置为默认值,并将numberpad显示给我可以实际测试的少数几个设备,或者将numberpad设为默认设置,然后切换回QWERTY设备,我知道这将打破,后一个选项因为我不能测试每一台有史以来的设备,所以不那么健壮.
测试对输入类型=“数字”的支持不是一个修复,因为显然浏览器支持该元素,它只是没有提供足够的键盘选项来输入所有数字类型.
那么..我想知道是否有人知道一种方法来测试键盘中某个键的存在(例如小数点)浏览器/操作系统分配给输入类型,和/或是否有其他人有更好的建议,因为我对移动设备很新.
我还应该提一下,我在这里使用JavaScript,因为这是一个网站,而不是本机应用程序.
谢谢 ：)
解决方法
不幸的是,firefox不支持数字输入类型.但是,您仍然可以尝试使用这些额外的HTML属性来使输入字段提示用户输入数字
inputmode='numeric' pattern='[0-9]*' //this makes it show only the numbers 0-9 without all the slashes and dashes and everything. Ignore this if that's not what you want