电话：用于文本输入的数字键盘

Question

有没有办法强制数字键盘出现在手机上<input type="text">？我刚刚意识到HTML5中的<input type="number">用于“浮点数”，因此它不适用于信用卡号，邮政编码等。

我想模拟<input type="number">的数字键盘功能，用于获取浮点数以外的数值的输入。也许还有另一种合适的input类型吗？

Answer 1

你可以<input type="text" pattern="\d*">。这将导致数字键盘出现。

有关详情，请参阅此处：Text, Web, and Editing Programming Guide for iOS

<form>
  <input type="text" pattern="\d*">
  <button type="submit">Submit</button>
</form>

Answer 2

截至2015年中期，我认为这是最佳解决方案：

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

这将为您提供Android和iOS上的数字小键盘：

它还通过向上/向下箭头按钮和键盘友好的向上/向下箭头键递增来为您提供预期的桌面行为：

在此代码段中尝试：

＆＃13;

＆＃13;

<form>
  <input type="number" pattern="[0-9]*" inputmode="numeric">
  <button type="submit">Submit</button>
</form>

＆＃13;

＆＃13;

＆＃13;

通过结合type="number"和pattern="[0-9]*，我们得到了一个适用于所有地方的解决方案。并且，它向前兼容未来HTML 5.1提出的inputmode属性。

注意：使用模式将触发浏览器的本机表单验证。您可以使用novalidate属性禁用此功能，也可以使用title属性自定义错误验证的错误消息。

如果您需要输入前导零，逗号或字母（例如国际邮政编码），请查看this slight variant。

学分和进一步阅读：

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/

Answer 3

我发现，至少对于类似“密码”的字段，执行类似<input type="tel" />的操作最终会产生最真实的数字 - 导向字段，并且它还具有以下优点： 无自动格式化 。例如，在我最近为希尔顿开发的移动应用程序中，我最终选择了这个：

......我的客户留下了非常深刻的印象。

<form>
  <input type="tel" />
  <button type="submit">Submit</button>
</form>

Answer 4

使用type="email"或type="url"会在某些手机上至少为您提供键盘，例如iPhone。对于电话号码，您可以使用type="tel"。

Answer 5

使用<input type="text" pattern="\d*">调出数字键盘存在危险。在firefox和chrome上，模式中包含的正则表达式会导致浏览器验证该表达式的输入。如果与模式不匹配或留空，则会发生错误。请注意其他浏览器中的意外操作。

Answer 6

对我来说，最好的解决方案是：

对于整数，它会在android和iphone上显示0-9 pad

<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 =＆＃39; novalidate＆＃39;如果你做自定义验证

，你的表单元素

以防万一你真的想要浮点数，不管你想要什么样的精度，都要加上＆＃39;。＆＃39;到android

<label for="ting">
<input id="ting" name="ting" type="number" pattern="[\d\.]*" step="0.01" />

Answer 7

我认为type="number"最适合语义网页。如果您只想更改键盘，可以使用type="number"或type="tel"。在这两种情况下，iPhone都不会限制用户输入。用户仍然可以输入（或粘贴）他/她想要的任何字符。唯一的变化是向用户显示的键盘。如果您想要超出此范围的任何限制，则需要使用JavaScript。

Answer 8

2018年：

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

适用于Android和iOS。

我在Android（^ 4.2）和iOS（11.3）

上测试过

Answer 9

<input type="text" inputmode="numeric">

使用Inputmode，您可以向浏览器提示。

Answer 10

您可以尝试这样：

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

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

Answer 11

我无法在所有情况下找到最适合我的类型：我需要默认为数字输入（输入＆＃34; 7.5＆＃34;例如）但在某些时候也允许文本（＆＃34;传递＆＃34;例如）。用户想要一个数字小键盘（例如7.5的输入），但偶尔需要输入文本（＆＃34;传递＆＃34;例如）。

而我所做的就是在表单中添加一个复选框，并允许用户在type =＆＃34; number＆＃34;之间切换我的输入（id =＆＃34; inputSresult＆＃34;）。并输入=＆＃34; text＆＃34;。

<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");

    }
});

这对我们来说效果很好。

Answer 12

 <input type="text" inputmode="decimal">

它将使用数字键盘给u文本输入

Answer 13

您可以使用inputmode html属性：

<input type="text" inputmode="numeric" />

有关更多详细信息，请检出MDN document on inputmode。

Answer 14

截至 2020 年

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

css 技巧做了一篇关于它的非常好的文章：https://css-tricks.com/finger-friendly-numerical-inputs-with-inputmode/

Answer 15

尝试一下：

$(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