检测移动设备的屏幕键盘中的键是否可用答案

【问题标题】：Detecting if keys are available in onscreen keyboard of mobile device检测移动设备的屏幕键盘中的键是否可用
【发布时间】：2011-11-17 00:51:22
【问题描述】：

我正在向我们的网站添加一些移动可用性优化。作为其中的一部分，我正在调整文本字段的类型属性，以便为用户提供预期数据类型的最佳输入工具。

我在触摸屏移动设备中遇到的一个问题是，不同操作系统上的浏览器，甚至同一操作系统上的不同浏览器，在使用 input type="number" 时会显示不同的屏幕键盘。

iOS 4.3.3 (iPhone 4) 上的 Safari 和 Android 2.3.4 上的 Chrome 包含小数点，但 Android 2.3.4 上的 Firefox 没有。

我尝试在 Firefox 中添加 step 属性 (step="0.1")，但没有任何改进。

如果我不能显示小数点，我将需要向 Firefox 显示完整的 QWERTY 键盘，这显然不会带来最佳的用户体验。它还引发了浏览器/设备嗅探的问题。我需要将 QWERTY 设为默认值，并将数字键盘显示给我可以实际测试的少数设备，或者将数字键盘设为默认值，然后在我知道这会中断的设备上切换回 QWERTY，后一个选项由于我无法在所有制造的设备上进行测试，因此它的健壮性要低得多。

测试对 input type="number" 的支持不是解决办法，因为很明显浏览器确实支持该元素，只是它没有提供足够的键盘选项来输入所有数字类型。

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

我还应该提到我在这里使用 JavaScript，因为这是一个网站，而不是原生应用程序。

谢谢:)

【问题讨论】：

input type="tel" 适合你吗？
至少在Android上，连keys都没有要求。输入法可以使用其他形式，例如使用手势的 Grafiti2。原生 Android 应用无法确定用户当前的输入法是否显示了某个键，更不用说通过浏览器了。

标签： android ios firefox keyboard touchscreen

【解决方案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

【讨论】：

pattern 不被 Safari 支持。