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

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


当前回答

有一个简单的方法来实现这种类型的行为(比如如果我们想在输入字段中使用文本格式,但仍然希望显示数字键盘):

我的输入:

<input inputMode=“numeric” onChange={handleInputChange} />

提示:如果你想要这种类型的行为(逗号分隔的数字) 然后遵循handleInputChange实现(这是基于上述状态的反应)

其他回答

我发现,至少对于类似“密码”的字段,执行类似<input type="tel" />这样的操作最终会生成最真实的面向数字的字段,而且它也没有自动格式化的好处。例如,在我最近为希尔顿酒店开发的一个移动应用程序中,我最后使用了这个:

... 我的客户对此印象深刻。

< >形式 <input type="tel" /> <按钮类型=“提交”> > < /按钮提交 > < /形式

我认为type="number"对于语义网页来说是最好的。如果你只是想改变键盘,你可以使用type="number"或type="tel"。在这两种情况下,iPhone都不限制用户输入。用户仍然可以输入(或粘贴)任何他/她想要的字符。唯一的变化是显示给用户的键盘。如果您希望在此之外有任何限制,则需要使用JavaScript。

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

    }
});

这对我们来说很有效。

2018年:

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

Android和iOS都适用。

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

有一个简单的方法来实现这种类型的行为(比如如果我们想在输入字段中使用文本格式,但仍然希望显示数字键盘):

我的输入:

<input inputMode=“numeric” onChange={handleInputChange} />

提示:如果你想要这种类型的行为(逗号分隔的数字) 然后遵循handleInputChange实现(这是基于上述状态的反应)