电话:用于文本输入的数字键盘

使用type="email"或type="url"至少会在某些手机上给你一个键盘，比如iPhone。对于电话号码，可以使用type="tel"。

我认为type="number"是语义网页的最佳选择。如果你只是想改变键盘，你可以使用type="number"或type="tel"。在这两种情况下，iPhone都不限制用户输入。用户仍然可以输入(或粘贴)任何他/她想要的字符。唯一的变化是显示给用户的键盘。如果您希望在此之外有任何限制，则需要使用JavaScript。

你可以做<input type="text" pattern="\d*">。这将导致出现数字键盘。

更多细节:文本，网络和编辑编程指南的iOS

<form>
<input type="text" pattern="\d*">
<button type="submit">Submit</button>
</form>

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

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

<form>
<input type="tel" />
<button type="submit">Submit</button>
</form>

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

你可以这样尝试:

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

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

对我来说，最好的解决方案是:

对于整数，在android和iphone上显示0-9键

<label for="ting">
<input id="ting" name="ting" type="number" pattern="[\d]*" />

你也可以这样做，以隐藏旋转器在firefox/chrome/safari，大多数客户认为他们看起来很丑

 input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
-webkit-appearance: none;
margin: 0;
}


input[type=number] {
-moz-appearance:textfield;
}

并添加novalidate='novalidate'到你的表单元素，如果你做自定义验证

Ps只是以防你真的想要浮点数，步进到你想要的任何精度，都会加上'。’

<label for="ting">
<input id="ting" name="ting" type="number" pattern="[\d\.]*" step="0.01" />

在2015年年中，我认为这是最好的解决方案:

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

这将给你在Android和iOS上的数字键盘:

它还为您提供了预期的桌面行为，向上/向下箭头按钮和键盘友好的向上/向下箭头键递增:

试试下面的代码片段:

<form>
<input type="number" pattern="[0-9]*" inputmode="numeric">
<button type="submit">Submit</button>
</form>

通过结合type="number"和pattern="[0-9]*，我们得到了一个适用于任何地方的解决方案。并且，它向前兼容未来HTML 5.1提出的inputmode属性。

注意:使用模式将触发浏览器的原生表单验证。你可以使用novalidate属性禁用它，或者你可以使用title属性自定义验证失败的错误消息。

如果你需要能够输入前导零、逗号或字母——例如，国际邮政编码——检查这个轻微的变化。

致谢及进一步阅读:

http://www.smashingmagazine.com/2015/05/form-inputs-browser-support-issue/ http://danielfriesen.name/blog/2013/09/19/input-type-number-and-ios-numeric-keypad/ < / p >

我找不到一种在所有情况下都最适合我的类型:我需要默认为数字条目(例如“7.5”条目)，但在某些时候也允许文本(例如“pass”)。用户需要一个数字键盘(例如7.5的输入)，但偶尔需要输入文本(例如“pass”)。

相反，我所做的是向表单添加一个复选框，并允许用户在type="number"和type="text"之间切换我的输入(id="inputSresult")。

<input type="number" id="result"... >
<label><input id="cbAllowTextResults" type="checkbox" ...>Allow entry of text results.</label>

然后我将一个点击处理程序连接到复选框，根据上面的复选框是否被选中，在文本和数字之间切换类型:

$(document).ready(function () {
var cb = document.getElementById('cbAllowTextResults');
cb.onclick = function (event) {
if ($("#cbAllowTextResults").is(":checked"))
$("#result").attr("type", "text");
else
$("#result").attr("type", "number");


}
});

这对我们来说很有效。

2018年:

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

Android和iOS都适用。

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

试试这个:

$(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" inputmode="numeric">

使用Inputmode你可以给浏览器一个提示。

 <input type="text" inputmode="decimal">

它将给你文本输入使用数字键盘

你可以使用inputmode html属性:

<input type="text" inputmode="numeric" />

有关更多详细信息，请查看MDN文档的输入模式。

截至2020年

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

css技巧做了一篇关于它的很好的文章:https://css-tricks.com/finger-friendly-numerical-inputs-with-inputmode/

有一个简单的方法来实现这种类型的行为(比如如果我们想在输入字段中使用文本格式，但仍然希望显示数字键盘):

< >强我输入:< / >强

<input inputMode="numeric" onChange={handleInputChange} />

Tip: if you want this type of behaviour(comma-separated numbers) then follow handleInputChange implementation (this is react based so mentioned states also)

所有发布的答案都会触发数字键盘，这不是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>