214

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

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

4

16 回答 16

234

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

有关更多详细信息,请参见此处:iOS 的文本、Web 和编辑编程指南

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

于 2011-06-28T20:20:54.173 回答
195

截至 2015 年年中,我相信这是最好的解决方案:

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

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

在此处输入图像描述

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

在此处输入图像描述

在此代码段中尝试:

<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


如果您需要能够输入前导零、逗号或字母(例如,国际邮政编码),请查看这个轻微的变体


学分和进一步阅读:

http://www.smashingmagazine.com/2015/05/form-inputs-browser-support-issue/ http://danielfriesen.name/blog/2013/09/19/input-type-number-and-ios-数字键盘/

于 2015-07-24T20:32:24.680 回答
64

我发现,至少对于类似“密码”的字段,做类似的事情<input type="tel" />最终会产生最真实的面向数字的字段,并且它还具有不自动格式化的好处。例如,在我最近为希尔顿开发的一个移动应用程序中,我最终使用了这个:

iPhone Web 应用程序显示带有输入标签,其类型为 TEL,可生成非常体面的数字键盘,而不是自动格式化且输入配置不太直观的 Type Number

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

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

于 2012-07-19T21:29:58.400 回答
17
<input type="text" inputmode="numeric">

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

于 2019-10-27T14:30:28.513 回答
13

Using the type="email" or type="url" will give you a keyboard on some phones at least, such as iPhone. For phone numbers, you can use type="tel".

于 2011-05-30T16:19:37.143 回答
11

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

于 2013-03-18T15:44:07.697 回答
8

您可以使用inputmodehtml 属性:

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

有关更多详细信息,请查看有关 inputmode 的 MDN 文档

于 2020-07-17T10:29:10.870 回答
4

For me the best solution was:

For integer numbers, which brings up the 0-9 pad on android and iphone

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

You also may want to do this to hide the spinners in firefox/chrome/safari, most clients think they look ugly

 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;
 }

And add novalidate='novalidate' to your form element, if your doing custom validation

Ps just in case you actually wanted floating point numbers after all,step to whatever precision you fancy, will add '.' to android

<label for="ting">
<input id="ting" name="ting" type="number" pattern="[\d\.]*" step="0.01" />
于 2015-02-26T09:36:44.557 回答
3

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

于 2011-06-01T12:12:00.567 回答
3

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

看这个截图

我的输入:

<input inputMode="numeric" onChange={handleInputChange} />

提示:如果您想要这种类型的行为(逗号分隔的数字),请遵循handleInputChange实现(这是基于反应的,因此也提到了状态)

在此处查看 React 代码

于 2021-11-14T10:35:16.703 回答
3

截至 2020 年

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

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

于 2021-04-27T23:18:34.427 回答
1

2018 年:

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

适用于Android和iOS。

我在 Android (^4.2) 和 iOS (11.3) 上测试过

于 2018-05-15T05:16:00.797 回答
0

你可以这样尝试:

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

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

于 2015-01-20T10:33:54.000 回答
0

我找不到在所有情况下都最适合我的类型:我需要默认输入数字(例如“7.5”的输入),但在某些时候也允许文本(例如“通过”)。用户想要一个数字键盘(例如输入 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");

    }
});

这对我们来说效果很好。

于 2016-06-13T21:05:30.490 回答
0
 <input type="text" inputmode="decimal">

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

于 2019-11-07T06:47:01.683 回答
-1

尝试这个:

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

于 2018-12-12T14:31:51.690 回答