有没有办法强制数字键盘出现在电话<input type="text">?我刚刚意识到,<input type="number">在HTML5中是“浮点数”,所以它不适合信用卡号,邮政编码等。
我想模拟<input type="number">的数字键盘功能,用于接受浮点数以外的数值的输入。是否有其他合适的输入类型可以做到这一点?
有没有办法强制数字键盘出现在电话<input type="text">?我刚刚意识到,<input type="number">在HTML5中是“浮点数”,所以它不适合信用卡号,邮政编码等。
我想模拟<input type="number">的数字键盘功能,用于接受浮点数以外的数值的输入。是否有其他合适的输入类型可以做到这一点?
当前回答
<input type="text" inputmode="numeric">
使用输入模式,你可以给浏览器一个提示。
其他回答
使用<input type="text" pattern="\d*">打开数字键盘是有危险的。在firefox和chrome上,模式中包含的正则表达式会导致浏览器验证该表达式的输入。如果它与模式不匹配或为空,则会发生错误。注意其他浏览器中的意外操作。
在2015年年中,我认为这是最好的解决方案:
<input type="number" pattern="[0-9]*" inputmode="numeric">
这将给你在Android和iOS上的数字键盘:
它还为您提供了预期的桌面行为,向上/向下箭头按钮和键盘友好的向上/向下箭头键递增:
试试下面的代码片段:
< >形式 <input type="number" pattern="[0-9]*" inputmode="numeric"> <按钮类型=“提交”> > < /按钮提交 > < /形式
通过结合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/
我找不到一种在所有情况下都最适合我的类型:我需要默认为数字条目(例如“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");
}
});
这对我们来说很有效。
对我来说,最好的解决方案是:
对于整数,在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" />
我发现,至少对于类似“密码”的字段,执行类似<input type="tel" />这样的操作最终会生成最真实的面向数字的字段,而且它也没有自动格式化的好处。例如,在我最近为希尔顿酒店开发的一个移动应用程序中,我最后使用了这个:
... 我的客户对此印象深刻。
< >形式 <input type="tel" /> <按钮类型=“提交”> > < /按钮提交 > < /形式