android – 检测移动设备的屏幕键盘上是否有密钥

我正在为我们的网站添加一些移动可用性优化.作为其中的一部分,我正在调整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