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

有没有一种方法可以强制数字键盘在电话上显示<input type="text">？我刚刚意识到<input type="number">HTML5中是用于“浮点数”的，因此它不适用于信用卡号，邮政编码等。

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

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

有关更多详细信息，请参见此处：适用于iOS的文本，Web和编辑编程指南

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

截至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-数字键盘/

我发现，至少对于类似“密码”的字段，这样做 <input type="tel" />最终会生成最真实的面向数字的字段，并且还具有不进行自动格式化的好处。例如，在我最近为希尔顿开发的移动应用程序中，我最终完成了以下工作：

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

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

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

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

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

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

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

对我而言，最好的解决方案是：

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

在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），但偶尔需要输入文本（例如，“通过”）。

相反，我所做的是在表单中添加了一个复选框，并允许用户在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="decimal">

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

试试这个：

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