有没有办法强制数字键盘出现在电话<input type="text">?我刚刚意识到,<input type="number">在HTML5中是“浮点数”,所以它不适合信用卡号,邮政编码等。
我想模拟<input type="number">的数字键盘功能,用于接受浮点数以外的数值的输入。是否有其他合适的输入类型可以做到这一点?
有没有办法强制数字键盘出现在电话<input type="text">?我刚刚意识到,<input type="number">在HTML5中是“浮点数”,所以它不适合信用卡号,邮政编码等。
我想模拟<input type="number">的数字键盘功能,用于接受浮点数以外的数值的输入。是否有其他合适的输入类型可以做到这一点?
当前回答
对我来说,最好的解决方案是:
对于整数,在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" />
其他回答
对我来说,最好的解决方案是:
对于整数,在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" />
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
使用type="email"或type="url"至少在某些手机上可以给你一个键盘,比如iPhone。对于电话号码,你可以使用type="tel"。
<input type="text" inputmode="numeric">
使用输入模式,你可以给浏览器一个提示。