使用输入文本在iPhone中显示数字键盘

Question

请注意，使用input type="number"可以显示如下数字键盘：

是否可以使用input type="text"来显示相同​​的数字键盘？我不想要使用pattern="\d*"显示数字键盘，因为该值可能包含小数位。

我想使用input type="text"代替input type="number"的原因是，如果我为数字字段输入非数字，则无法取回值。例如，如果我输入 ABC ，它将自动变为空。在我看来，使用input type="text"将更容易进行这种控制。

Answer 1

如果您的输入是真数，整数或小数，则使用HTML5 type="number"输入。这将在Android设备上显示正确的键盘（假设也是Windows手机）。

然后诀窍是在该属性上放置pattern="[0-9]*"以强制iOS上的特殊数字小键盘。请注意：

1. 这不会将小数或减号标记为无效，因为模式属性实际上对类型=＆＃34;数字＆＃34;无效。字段！和
2. 这是获取iOS数字键盘的 ONLY 方式。查看alpha键盘的数字部分（如上面的屏幕截图所示）与真正的数字键盘之间的差异。



最后要注意的是，请确保不要将类型编号字段用于非真实数字的输入（例如，带有前导零的zipcodes或带有逗号或空格的产品代码）。数字输入字段可能不会提交不是真数字的值！ （取决于浏览器/设备）

Answer 2

使用此代码：

<input type="number" pattern="[0-9]*" />

Answer 3

还有其他类型可以显示数字键盘。

使用type =“number”，您无能为力。它不会接受任何数字。但是如果你使用type =“tel”，这是一个丑陋的黑客，但它确实有效。

这是我的邮政编码示例：

<input type="tel" id="Address_ZipCode" class="zip-code" pattern="^\d{2}-\d{3}$" maxlength="6">

但某些屏幕键盘上的“ - ”键会出现问题，您可以通过在JavaScript中添加指定数量的字符后添加短划线来解决此问题，如下所示：

// Zip Code dashes
$('input[type="tel"].zipCode').keyup(function(event) {
    var t = event.target, v = t.value;
    if (v.length == 2) { t.value = v + '-'; }
});

（请原谅jQuery）。 您可以使用type =“text”和pattern属性，而不是使用type =“tel”，但我还没有测试过它。很可能它不适用于大多数浏览器。

Answer 4

到目前为止，我找不到任何解决方案。

但是你可以做的一个可能的技巧是使用type =“number”并使用document.getElementById（“element”）在javascript中更改它.type =“text”;

但是这也会清除ABC，但它会接受数字逗号和小数

Answer 5

尝试此工作。为我工作。

它会将类型转换为数字然后返回文本。 这将强制ios在第一个道具更改时切换到数字键盘。 setSelectionRange用于选择输入值。

$(function(){

    $("input[type='text']").on('mouseup', function(e){
        e.preventDefault();
    });

    $("input[type='text']").on('focus click', function(e){
        $(this).prop('type', 'number');
        var obj = $(this);
        setTimeout(function(){
            obj.prop('type', 'text');
            document.getElementById(obj.attr('id')).setSelectionRange(0, 9999);
        }, 50);     
    });
});

Answer 6

Apple在iOS上提供的数字键盘是一个可笑的笑话。但是，您可以使用以下方法解决此问题：

inputmode="decimal"

在Android上正常工作，当然。

：）