检测移动设备的屏幕键盘上是否有按键

Question

我正在为我们的网站添加一些移动可用性优化.作为其中的一部分,我正在调整textfields的type属性,为用户提供预期数据类型的最佳输入工具.

我在触摸屏移动设备中遇到的一个问题是,当使用输入类型="数字"时,不同操作系统上的浏览器,甚至同一操作系统上的不同浏览器,显示不同的屏幕键盘.

iOS 4.3.3(iPhone 4)上的Safari和Android 2.3.4上的Chrome包含一个小数点,但Android 2.3.4上的Firefox没有.

我尝试添加步骤属性(步骤="0.1"),但在Firefox中没有任何改进.

如果我无法显示小数点,我将需要向Firefox展示完整的QWERTY键盘,这显然不会带来最佳的用户体验.它还引发了浏览器/设备嗅探的问题.要么我需要将QWERTY设为默认值,并将数字键盘显示给我可以实际测试的少数几个设备,或者将数字键盘设为默认设置,然后在设备上切换回QWERTY,我知道这会破坏,后一个选项因为我无法测试每一台有史以来的设备,所以不那么强大.

测试对输入类型="数字"的支持不是一个修复,显然浏览器确实支持该元素,它只是没有提供足够的键盘选项来输入所有数字类型.

那么..我想知道是否有人知道一种方法来测试键盘中是否存在某个键(例如小数点),浏览器/操作系统分配给输入类型,和/或是否有其他人有更好的建议,因为我对移动设备很新.

我还应该提到我在这里使用JavaScript,因为这是一个网站,而不是本机应用程序.

谢谢 :)

Answer 1

不幸的是，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