有没有办法强制数字键盘出现在电话<input type="text">?我刚刚意识到,<input type="number">在HTML5中是“浮点数”,所以它不适合信用卡号,邮政编码等。

我想模拟<input type="number">的数字键盘功能,用于接受浮点数以外的数值的输入。是否有其他合适的输入类型可以做到这一点?


当前回答

2018年:

<input type="number" pattern="\d*">

Android和iOS都适用。

我在Android(^4.2)和iOS(11.3)上进行了测试

其他回答

你可以这样尝试:

<input type="number" name="input">
<input type="submit" value="Next" formnovalidate="formnovalidate">

但是要注意:如果您的输入包含数字以外的内容,则不会将其传输到服务器。

我找不到一种在所有情况下都最适合我的类型:我需要默认为数字条目(例如“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="text" inputmode="numeric">

使用输入模式,你可以给浏览器一个提示。

截至2020年

<input type="number" pattern="[0-9]*" inputmode="numeric">

CSS技巧做了一篇很好的文章:https://css-tricks.com/finger-friendly-numerical-inputs-with-inputmode/

对我来说,最好的解决方案是:

对于整数,在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" />