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

【问题标题】：Phone: numeric keyboard for text input电话：用于文本输入的数字键盘
【发布时间】：2011-09-04 22:24:03
【问题描述】：

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

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

【问题讨论】：

邮政编码仍然没有很好的答案。我在这里专门针对国际邮政编码重新提出了这个问题：stackoverflow.com/questions/25425181/…
我想出了一个骇人听闻的方法来做到这一点..排序：stackoverflow.com/a/25599024/1922144
截至 2015 年中，有更好的方法：stackoverflow.com/a/31619311/806956
较老的、密切相关的问题：stackoverflow.com/questions/3368546/…

标签： android ios keyboard numbers html-input

【解决方案1】：

有一种简单的方法可以实现这种行为（例如，如果我们想在输入字段中使用文本格式，但仍希望显示 数字键盘 ):

我的意见：

&lt;input inputMode="numeric" onChange={handleInputChange} /&gt;

提示：如果你想要这种行为（逗号分隔的数字）然后遵循handleInputChange 实现（这也是基于反应的，所以也提到了状态）

【讨论】：

请不要将代码发布为图片。将代码复制并粘贴到帖子本身。

【解决方案2】：

截至 2020 年

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

css tricks 写了一篇非常好的文章：https://css-tricks.com/finger-friendly-numerical-inputs-with-inputmode/

【讨论】：

【解决方案3】：

可以使用inputmodehtml属性：

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

更多详情，请查看MDN document on inputmode。

【讨论】：

这个答案提供了@Ralf de Kleine 提出的相同解决方案
我对此进行了测试，这也适用于 Android 上的 Quasar 和 Cordova inputmode="tel" 也适用并提供额外的符号。

【解决方案4】：

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

它将使用数字键盘为您提供文本输入

【讨论】：

【解决方案5】：

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

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

【讨论】：

【解决方案6】：

你可以<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>

【讨论】：

如果你只想要数字键盘但不想验证（例如在 Chrome 中），你可以在表单上放置 novalidate 属性。
我发现\d* 不起作用，需要[0-9]。请注意，这将适用于 type='numeric'。这是根据邮政编码的链接文档参考建议的。
只要您只需要数值就可以使用。需要“.”的浮点数（或某些地区的“,”）无法输入，因为它们的键盘不包含这些字符。
如果我需要使用 . （点），我该如何使用它？此模式仅显示 [0-9]
在安卓上不起作用？我在 ios 上测试并成功运行，但在 android 上没有运行。我该如何解决它

【解决方案7】：

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

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

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

【讨论】：

对我来说问题不是自动格式化，而是验证。 number 类型的输入会在许多浏览器中强制执行严格的数字规则。如果用户添加空格（或逗号）来分隔千位，您将不会从输入中获得任何值。是的，即使在 JavaScript 中 input.value 也会为空。 tel 类型的输入不限于特定格式，因此用户仍然可以输入任何内容，并且验证是一个单独的过程（供开发人员处理）。
我如何在这个键盘上使用十进制数字

【解决方案8】：

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

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

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

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

在这段代码中试试 sn-p:

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

通过结合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/

【讨论】：

HTML5 type="number" spec 表示不得指定以下内容属性且不适用于元素：... inputmode
@Tgr 啊，很好。该规范似乎希望人们使用<input type="text" inputmode="numeric">，并且它希望移动浏览器查看inputmode，以确定它是否显示数字键盘或全键盘。由于没有浏览器支持inputmode，我不确定它将如何在桌面浏览器和移动浏览器上实现。例如：桌面浏览器是否允许在<input type="text" inputmode="numeric"> 中输入字母？如果是这样，那就有问题了。 <input type="number"> 防止这种情况，只允许数字。也许我们必须等到浏览器开始实现它，然后我们才能更新这个答案。
对type="number" 的支持是decent，但它可能会显示一个没有多大意义的微调器，例如信用卡号码。
拥有 type="number" 真是头疼 X(。如果输入无效，你将无法在 JS 中获取输入的值，你无法获取光标位置等
This attribute applies when the value of the type attribute is text, search, tel, url, email, or password, otherwise it is ignored.

【解决方案9】：

试试这个：

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

【讨论】：

【解决方案10】：

2018 年：

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

适用于 Android 和 iOS。

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

【讨论】：

【解决方案11】：

我找不到在所有情况下最适合我的类型：我需要默认为数字输入（例如“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");

    }
});

这对我们来说效果很好。

【讨论】：

【解决方案12】：

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

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

【讨论】：

【解决方案13】：

你可以这样试试：

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

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

【讨论】：

【解决方案14】：

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

【讨论】：

在包含的form element 上添加novalidate 属性应该可以解决自动验证问题。一定要自己做一些验证。

【解决方案15】：

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

【讨论】：

我遇到的问题是 type="number" 应该只用于浮点数 - 所以没有信用卡、邮政编码或大量其他数字，只有字符串。我希望既有一种语义编码方式，也有正确的键盘显示方式。我认为适当的类型是 input type="text" 但随后显示错误的键盘。如果你能指点我一些 javascript 来做到这一点，那将解决这两个问题。
type="number" 用于浮动。 type="text" 用于字符串。你真正想要的是整数。我认为浮点数比字符串更接近整数。你怎么看？
使用 type="number" 需要注意的一点是，Chrome 至少会强制输入为数字 - 这会破坏使用空格输入的信用卡号（例如）
@therefromhere 它还会将01920 之类的邮政编码转换为1920。
如果用户在浏览器中设置了不同的语言stackoverflow.com/questions/5345095/…，它也会搞砸

【解决方案16】：

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

【讨论】：