在 iOS5 及以后的版本中，可以通过在 input 元素中设置 type="number" 或 type="tel" 来让 iOS 显示数字键盘。但是有时候，我们需要在不使用这些类型的情况下也能默认显示数字键盘。
实现方法
要实现这个功能，我们可以使用 inputmode 属性。该属性指定了输入内容的类型，如电话号码、邮件地址等，并且它还可以影响到浏览器在软键盘上显示的布局。
在 iOS 上，如果将 inputmode 设置为 numeric，那么就会默认显示数字键盘。
<input type="text" inputmode="numeric">
浏览器兼容性
目前支持 inputmode 属性的浏览器包括：
- Chrome for Android 66+
- Safari on iOS 12.2+
- Samsung Internet 9.0+
- Firefox for Android 68+
对于不支持 inputmode 属性的浏览器，仍然可以通过设置 type="tel" 或 type="number" 来实现类似的效果。
示例代码
-- -------------------- ---- ------- --------- ----- ------ ------ ----- ---------------- ----------- --------------------- ------- ------ ------ ---------------------------------- ------ ---------------- ----------- -------------------- ------- -------
结论
通过使用 inputmode 属性，我们可以在 iOS 上实现无需设置 type="number" 或 type="tel" 也能默认显示数字键盘的效果。虽然目前可能存在一些浏览器兼容性问题，但是在支持该属性的浏览器上已经可以很好地发挥作用。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/27095