试试这个:

$(document).ready(function() {
    $(document).find('input[type=number]').attr('type', 'tel');
});

参见:https://answers.laserfiche.com/questions/88002/Use-number-field-input-type-with-Field-Mask

使用<input type="text" pattern="\d*">打开数字键盘是有危险的。在firefox和chrome上，模式中包含的正则表达式会导致浏览器验证该表达式的输入。如果它与模式不匹配或为空，则会发生错误。注意其他浏览器中的意外操作。

所有发布的答案都会触发数字键盘，这不是OP要求的。我发现在文本输入中触发type='number'键盘的唯一方法是使用CSS和JS。

诀窍是创建第二个数字输入，使用css将其重叠在文本输入的顶部。

<style type="text/css">
    /* hide number spinners on inputs */
    input::-webkit-outer-spin-button,
    input::-webkit-inner-spin-button {
        -webkit-appearance: none;
        margin: 0;
    }
    input[type=number] {
        -moz-appearance:textfield; /* Firefox */
    }
    .hidden-number {
        margin-top: -26px;
    }
</style>


<form method="post" action="submit.php">
    <input class="form-control" type="text" name="input_name">
    <input class="form-control hidden-number" type="number" id="input_name">
</form>

使用JavaScript，当您的数字输入获得焦点时，它将触发您想要的键盘。然后，您必须删除type='number'属性，这将阻止您输入除数字以外的任何内容。然后将文本输入中的任何内容转移到数字输入中。最后，当数字输入失去焦点时，将其内容转移回文本输入并替换其type='number'属性。

<script type="text/javascript">
    $(".hidden-number").on("focus", function(){
        $(this).removeAttr("type");
        var text_input = $("input[name="+this.id+"]");
        $(this).val(text_input.val());
        text_input.val("");
    });

    $(".hidden-number").on("focusout", function(){
        var text_input = $("input[name="+this.id+"]");
        text_input.val($(this).val());
        $(this).attr("type", "number");
    });
</script>

我发现，至少对于类似“密码”的字段，执行类似<input type="tel" />这样的操作最终会生成最真实的面向数字的字段，而且它也没有自动格式化的好处。例如，在我最近为希尔顿酒店开发的一个移动应用程序中，我最后使用了这个:

．.． 我的客户对此印象深刻。

< >形式 <input type="tel" /> <按钮类型=“提交”> > < /按钮提交 > < /形式

2018年:

<input type="number" pattern="\d*">

Android和iOS都适用。

我在Android(^4.2)和iOS(11.3)上进行了测试

你可以这样尝试:

<input type="number" name="input">
<input type="submit" value="Next" formnovalidate="formnovalidate">

但是要注意:如果您的输入包含数字以外的内容，则不会将其传输到服务器。