有没有办法强制数字键盘出现在电话上<input type="text">？我刚刚意识到<input type="number">在 HTML5 中是用于“浮点数”的，所以它不适合信用卡号、邮政编码等。
我想模拟 , 的数字键盘功能<input type="number">，用于采用浮点数以外的数值的输入。是否有另一种合适input的类型可以做到这一点？
问问题
282263 次
16 回答
234
你可以做到<input type="text" pattern="\d*">。这将导致出现数字键盘。
有关更多详细信息，请参见此处：iOS 的文本、Web 和编辑编程指南
<form>
<input type="text" pattern="\d*">
<button type="submit">Submit</button>
</form>于 2011-06-28T20:20:54.173 回答
195
截至 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-数字键盘/
于 2015-07-24T20:32:24.680 回答
64
我发现，至少对于类似“密码”的字段，做类似的事情<input type="tel" />最终会产生最真实的面向数字的字段，并且它还具有不自动格式化的好处。例如，在我最近为希尔顿开发的一个移动应用程序中，我最终使用了这个：
...我的客户印象非常深刻。
<form>
<input type="tel" />
<button type="submit">Submit</button>
</form>于 2012-07-19T21:29:58.400 回答
17
<input type="text" inputmode="numeric">
使用Inputmode，您可以向浏览器提供提示。
于 2019-10-27T14:30:28.513 回答
13
Using the type="email" or type="url" will give you a keyboard on some phones at least, such as iPhone. For phone numbers, you can use type="tel".
于 2011-05-30T16:19:37.143 回答
11
使用 调<input type="text" pattern="\d*">出数字键盘存在危险。在 firefox 和 chrome 上，模式中包含的正则表达式会导致浏览器验证该表达式的输入。如果它与模式不匹配或留空，则会发生错误。请注意其他浏览器中的意外操作。
于 2013-03-18T15:44:07.697 回答
8
于 2020-07-17T10:29:10.870 回答
4
For me the best solution was:
For integer numbers, which brings up the 0-9 pad on android and iphone
<label for="ting">
<input id="ting" name="ting" type="number" pattern="[\d]*" />
You also may want to do this to hide the spinners in firefox/chrome/safari, most clients think they look ugly
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;
}
And add novalidate='novalidate' to your form element, if your doing custom validation
Ps just in case you actually wanted floating point numbers after all,step to whatever precision you fancy, will add '.' to android
<label for="ting">
<input id="ting" name="ting" type="number" pattern="[\d\.]*" step="0.01" />
于 2015-02-26T09:36:44.557 回答
3
我认为type="number"最适合语义网页。如果只想更换键盘，可以使用type="number"或type="tel"。在这两种情况下，iPhone 都不限制用户输入。用户仍然可以输入（或粘贴）他/她想要的任何字符。唯一的变化是向用户显示的键盘。如果您想要超出此范围的任何限制，则需要使用 JavaScript。
于 2011-06-01T12:12:00.567 回答
3
有一种简单的方法可以实现这种行为（例如，如果我们想在输入字段中使用文本格式但仍希望显示数字键盘）：
我的输入：
<input inputMode="numeric" onChange={handleInputChange} />提示：如果您想要这种类型的行为（逗号分隔的数字），请遵循handleInputChange实现（这是基于反应的，因此也提到了状态）
于 2021-11-14T10:35:16.703 回答
3
截至 2020 年
<input type="number" pattern="[0-9]*" inputmode="numeric">
css tricks 做了一篇非常好的文章：https ://css-tricks.com/finger-friendly-numerical-inputs-with-inputmode/
于 2021-04-27T23:18:34.427 回答
1
2018 年：
<input type="number" pattern="\d*">
适用于Android和iOS。
我在 Android (^4.2) 和 iOS (11.3) 上测试过
于 2018-05-15T05:16:00.797 回答
0
你可以这样尝试：
<input type="number" name="input">
<input type="submit" value="Next" formnovalidate="formnovalidate">
但请注意：如果您的输入包含数字以外的内容，则不会将其传输到服务器。
于 2015-01-20T10:33:54.000 回答
0
我找不到在所有情况下都最适合我的类型：我需要默认输入数字（例如“7.5”的输入），但在某些时候也允许文本（例如“通过”）。用户想要一个数字键盘（例如输入 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");
}
});
这对我们来说效果很好。
于 2016-06-13T21:05:30.490 回答
0
<input type="text" inputmode="decimal">
它将使用数字键盘为您提供文本输入
于 2019-11-07T06:47:01.683 回答
-1
尝试这个：
$(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
于 2018-12-12T14:31:51.690 回答