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

如何解决电话：用于文本输入的数字键盘

| 有没有办法强制数字键盘在手机上按“ 0”键？我刚刚意识到HTML5中的“ 1”代表“浮点数”，因此不适合信用卡号，邮政编码等。我想要模拟take1ѭ的数字键盘功能，以接受采用浮点数以外的数字值的输入。也许还有另一种合适的3型吗？

解决方法

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

, 我发现，至少对于类似于“密码”的字段，执行类似ѭ8something的操作最终会生成最可靠的面向数字的字段，并且还具有无需自动格式化的优点。例如，在我最近为希尔顿开发的一个移动应用程序中，我最终完成了以下工作： ...我的客户印象深刻。

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

, 使用type=\"email\"或type=\"url\"，至少可以在某些电话（例如iPhone）上为您提供键盘。对于电话号码，您可以使用type=\"tel\"。 , 使用<input type=\"text\" pattern=\"\\d*\">调出数字键盘有危险。在firefox和chrome上，模式中包含的正则表达式使浏览器验证对该表达式的输入。如果它与模式不匹配或留为空白，则会发生错误。请注意其他浏览器中的意外操作。 , 对我而言，最好的解决方案是：对于整数，在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，以防万一您实际上想要浮点数，然后提高到您喜欢的精度，将会在Android中添加\

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

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

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

使用Inputmode可以向浏览器提示。 , 在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），但偶尔需要输入文本（例如，“通过”）。相反，我所做的是在表单中添加一个复选框，并允许用户在类型=“数字”和类型=“文本”之间切换我的输入（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

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

如何解决电话：用于文本输入的数字键盘

解决方法

相关推荐