你可能想看看这个：https://css-tricks.com/finger-friendly-numerical-inputs-with-inputmode/

<input inputmode="numeric" pattern="[0-9]*" type="text" name="creditcard">

inputmode将在最新的Android浏览器上工作，pattern是iOS的黑客。特别注意他们谈论iOS不允许用户更换键盘的文章。
希望能有所帮助。

使用JavaScript解决问题的完整解决方案。
诀窍是创建第二个数字输入，使用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>

您不能这样做，因为提供给用户的键盘布局是基于您的输入的输入类型的。当用户实际上可以输入字母数字字符时，向用户显示数字小键盘将是一个糟糕的UI原则。电话输入类型不允许您将键盘更改为数字键盘，因为它是专门设计为只接受电话号码的。
所以如果你想让用户在你的输入中输入字母数字字符，你不应该把键盘设置成数字键盘。请看下面的例子：

<input type="text" name="valText"/>

另一方面，如果您希望用户只输入数字字符，则应将输入类型设置为数字，如下所示：

<input type="number" name="valNumber"/>

解决方法是创建多个输入，并将其类型设置为您希望用户在特定字段中输入的任何类型。然后，您可以将它们连接为单个值，以这种方式保存它们。但是，您需要将它们保存为包含字符和数字的连接字符串。
您也可以查看here链接，检查您可以使用的不同输入类型，以防您发现其中一种类型对您更有用。但您必须记住的是，输入类型将定义键盘布局。您也可以查看this以获得更好的理解。