小编jat*_*rim的帖子

目标:找到一个跨平台解决方案,用于在移动触摸设备上显示数字键盘,并且只需最少的黑客攻击.

问题:

我有一个使用数据输入表单的常规Web应用程序,主要包含数字数据.当用户在移动设备上与我的网站进行交互时,我想显示数字虚拟键盘,因为大多数标准键盘需要第二次按下才能从alpha切换到数字.我知道我可以通过设置input元素的"type"属性来触发不同的键盘:

type=number:这在iOS/Safari下运行良好.我不确定该平台上的其他浏览器.

在Android上,这并不能在各种浏览器上持续提升正确的键盘,并且通常会在输入上产生不需要的电梯按钮.我还没有找到一种干净的方法来在CSS中关闭它们.

type=tel:这几乎适用于iOS/Safari,但电话键盘没有小数点按钮.

似乎在多个Android浏览器中运行良好,没有任何无关的UI元素添加到页面.

我目前的解决方案是hacky和简单.基于我已经用于数字验证的类,我将每个应该包含数字的文本元素替换为基于检测到的OS /浏览器的新输入number或tel类型.

var isAndroid = navigator.userAgent.match(/android/i) ? true : false;
var isIOS = navigator.userAgent.match(/(ipod|ipad|iphone)/i) ? true : false;

if (isAndroid || isIOS) {
    var useNumberType = (isIOS ? true : false); //iOS uses type=number, everyone else uses type=tel
    jQuery("input.num").each(function () {
        var type = (useNumberType ? "number" : "tel");
        var html = this.outerHTML;
        html = html.replace(/(type=\"?)text(\"?)/, "$1" + type + "$2");
        this.outerHTML = html;
    }); …