请注意，使用input type="number"可以显示如下数字键盘：
是否可以使用input type="text"显示相同的数字键盘？我不想显示数字键盘，pattern="\d*"因为该值可能包含小数位。
我想使用input type="text"而不是的原因input type="number"是，如果我为数字字段输入非数字，我将无法取回该值。例如，如果我输入ABC，它将自动变为空。在我看来，使用input type="text"这种控制会更容易。
问问题
34598 次
7 回答
20
如果您的输入是真数字、整数或小数，则使用 HTML5type="number"输入。这将在 Android 设备上显示正确的键盘（也假设 Windows 手机）。
然后诀窍是pattern="[0-9]*"在该属性上放置一个以强制 iOS 上的特殊数字键盘。注意：
- 这不会将小数或减号标记为无效，因为模式属性实际上在 type="number" 字段上无效！和
- 这是获取 iOS 数字键盘的唯一方法。查看字母键盘的数字部分（如上面的屏幕截图）与真正的数字键盘之间的区别。
最后一点，请确保不要将类型编号字段用于非真实数字的输入（例如，带有前导零的邮政编码或带有逗号或空格的产品代码）。数字输入字段不得提交不是真数字的值！（取决于浏览器/设备）
于 2014-12-18T03:55:15.440 回答
10
Apple 在 iOS 上提供的数字键盘是一个可悲的笑话。但是，您可以使用以下方法解决此问题：
inputmode="decimal"
当然，在 Android 上工作正常。
:)
于 2019-07-09T23:57:02.390 回答
4
使用此代码：
<input type="number" pattern="[0-9]*" />
于 2017-02-25T13:21:27.747 回答
2
还有其他类型可以显示数字键盘。
使用 type="number" 你什么也做不了。除了数字，它不会接受任何东西。但是如果你使用 type="tel"，这是一个丑陋的 hack，但它确实有效。
这是我的邮政编码示例：
<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" 和模式属性，而不是使用 type="tel"，但我还没有测试过。很可能它不适用于大多数浏览器。
于 2013-10-11T16:47:57.767 回答
0
到目前为止，我找不到任何解决方案。
但是你可以做的一个可能的技巧是使用 type="number" 并在javascript中使用 document.getElementById("element").type="text";
但这也会清除 ABC 但它会接受数字逗号和小数
于 2013-05-16T19:35:27.887 回答
0
试试这个变通方法。为我工作。
它会将类型转换为数字，然后返回文本。这将强制 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);
});
});
于 2015-10-23T13:48:24.373 回答
