使用自定义/货币模式强制iOS数字键盘

Question

在使用自定义模式作为输入类型时,是否有可能强制iOS设备显示数字键盘？

我的输入模式:

<input id="price" class="numeric" pattern="\d+((\.|,)\d{1,2})?" name="price" 
title="" data-mini="true" data-clear-btn="true" autocomplete="off" autofocus />

我想键入一个类似'14 .99'的货币值,并在iOS设备上显示一个可以访问数字的键盘

<input type='number' />
<input pattern='[0-9]*' />
<input pattern='[\d]*' />

在添加小数符号时都缺少小数符号和/或没有作为数字验证.另一种方法可能是在正确的位置创建小数点的javascript函数,例如按此顺序按1-> 2-> 9-> 9创建on keypress()0.01-> 0.12-> 1.29-> 12.99,但这需要输入字段type='text'- >显而易见的问题是在聚焦输入字段时显示文本键盘.

我该如何解决这个问题？

编辑

环境:

• JQM 1.3.2
• jquery 1.8.2

Answer 1

目前,JavaScript是唯一的解决方案.这是最简单的方法(使用jQuery):

HTML

<input type="text">

JavaScript的

$('input[type="text"]').on('touchstart', function() {
  $(this).attr('type', 'number');
});

$('input[type="text"]').on('keydown blur', function() {
  $(this).attr('type', 'text');
});

这个想法很简单.输入开始并以type ="text"结束,但它在touchstart事件中短暂变为type ="number".这会导致出现正确的iOS键盘.一旦用户开始输入任何输入或离开该字段,输入再次变为type ="text",从而绕过验证.

这种方法有一个缺点.当用户返回已填写的输入时,输入将丢失(如果它未验证).这意味着用户将无法返回并编辑以前的字段.在我的情况下,这并不是那么糟糕,因为用户可能想要使用不同的值一次又一次地使用计算器,因此自动删除输入将为他们节省几个步骤.但是,在所有情况下,这可能并不理想.

看起来Mobile Safari支持电子邮件,号码,搜索,电话和网址的新HTML5输入类型属性.这些将切换显示的键盘.请参阅type属性.

例如,你可以这样做:

<input type="number" />

当输入框有焦点时,会显示数字键盘(好像用户有完整的键盘并点击"123"按钮.

如果你真的只想要数字,你可以指定:

<input type="tel" />

然后用户将获得电话号码拨号键盘.

我知道这适用于Mobile Safari - 我只假设它可以与UIWebView一起使用.

http://conecode.com/news/2011/12/mobile-safari-uiwebview-input-types/

Answer 2

我制作了这个小片段来实现你想要的东西,我在iPhone 5 v7.0.3上进行了测试

我曾经e.which读过CharCode输入然后将它推入一个数组(之前),它表示十进制标记前的数字,另一个数组(之后)将数值从(之前)数组移过十进制标记.

由于我谦逊的编程技巧,它可能看起来很复杂.

1)代码演示 - 2)货币转换演示

HTML:

<input type="tel" id="number" />

JS

变量和功能:

// declare variables
var i = 0,
    before = [],
    after = [],
    value = [],
    number = '';

// reset all values
function resetVal() {
    i = 0;
    before = [];
    after = [];
    value = [];
    number = '';
    $("#number").val("");
    $(".amount").html("");
}

// add thousand separater
function addComma(num) {
  return num.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");
}

主要代码:

// listen to keyup event
$("#number").on("keyup", function (e, v) {

    // accept numbers only (0-9)
    if ((e.which >= 48) && (e.which <= 57)) {

        // convert CharCode into a number   
        number = String.fromCharCode(e.which);

        // hide value in input
        $(this).val("");

        // main array which holds all numbers
        value.push(number);

        // array of numbers before decimal mark
        before.push(value[i]);

        // move numbers past decimal mark
        if (i > 1) {
            after.push(value[i - 2]);
            before.splice(0, 1);
        }

        // final value
        var val_final = after.join("") + "." + before.join("");

        // show value separated by comma(s)
        $(this).val(addComma(val_final));

        // update counter
        i++;

        // for demo
        $(".amount").html(" " + $(this).val());

    } else {

        // reset values
        resetVal();
    }
});

重启:

// clear arrays once clear btn is pressed
$(".ui-input-text .ui-input-clear").on("click", function () {
    resetVal();
});

结果: