有没有办法强制数字键盘出现在电话<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">
使用输入模式,你可以给浏览器一个提示。
其他回答
我找不到一种在所有情况下都最适合我的类型:我需要默认为数字条目(例如“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");
}
});
这对我们来说很有效。
你可以这样尝试:
<input type="number" name="input">
<input type="submit" value="Next" formnovalidate="formnovalidate">
但是要注意:如果您的输入包含数字以外的内容,则不会将其传输到服务器。
所有发布的答案都会触发数字键盘,这不是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>
您可以执行<input type="text" pattern="\d*">。这将导致出现数字键盘。
请参阅这里了解更多详细信息:iOS的文本,Web和编辑编程指南
< >形式 <input type="text" pattern="\d*"> <按钮类型=“提交”> > < /按钮提交 > < /形式
<input type="text" inputmode="decimal">
它将给你文本输入使用数字键盘