HTML输入：默认强制数字键盘但允许字母

Question

我有一个HTML输入。输入位于网页上，该网页在Android手机的Chrome中打开。

我想要一个让用户在开始输入值时看到数字键盘的选项。但同时，我希望他有可能输入字母数字字符。

• 我无法使用pyspark sql function，因为它不允许输入字母。

• 我无法使用type="number"，因为它默认打开alpha键盘，用户必须切换到数字键盘。

因此，我试图找到的选项是标准字母数字键盘打开但输入的数字已被选中（就像按下标准键盘上的？123一样）。

我试过使用type =＆＃34; tel＆＃34;但我不明白如何切换到数字中的字母。

我正在使用Cordova，所以如果没有选择使用HTML，我可以使用原生插件，如果你建议我使用它们。

我使用type="text"所以，如果没有HTML方法可以做任何事情我可以整合任何类型的插件，如果你能建议我的话。

TL; DR：这是我想要看到的默认键盘布局。有可能吗？

Answer 1

您可能想看看以下内容：https://css-tricks.com/finger-friendly-numerical-inputs-with-inputmode/

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="itemsdetails" class="itemsdetails">
   <thead>
      <tr>
         <th>Sl No</th>
         <th>Items</th>         
      </tr>
   </thead>
   <tbody>
      <tr id="1itemslno" class="item-row itemr">
         <td><input class="invoiceitemsID" id="invoiceitemsID1" type="hidden" value="16"><input id="slno1" invoiceitems_id="16" name="slno[]" class="form-control id" value="1" readonly=""></td>
         <td class="description"> <input invoiceitems_id="16" id="itemname" name="itemname" class="form-control itemname info" value="ghvg  "> </td>
      </tr>
   </tbody>
   <tfoot>
      <tr id="hiderow_duplicate" style="display: block;">
         <th><button style="width:73px;" class="add_dup">ADD ROW-D</button></th>
      </tr>
   </tfoot>
</table>

<input inputmode="numeric" pattern="[0-9]*" type="text" name="creditcard"> 将在最新的Android浏览器上运行，而inputmode是iOS的黑客。请特别注意他们谈论iOS不允许用户更改键盘的文章。

希望有帮助。

Answer 2

您无法执行此操作，因为提供给用户的键盘布局基于输入的输入类型。当用户实际上输入字母数字字符时，向用户显示数字小键盘将是一个糟糕的UI原则。电话输入类型不允许您将键盘更改为数字键盘，因为它专门设计为仅接受电话号码。

因此，如果您想让用户在输入中输入字母数字字符，则不应将键盘设置为数字。请参阅以下示例：

<input type="text" name="valText"/>

另一方面，如果您想让用户只输入数字字符，那么您应该将输入类型设置为数字，如下所示：

<input type="number" name="valNumber"/>

对此的解决方法是创建多个输入并将其类型设置为您希望用户在该特定字段中输入的任何内容。然后，您可以将它们连接到单个值，以便以这种方式保存它们。但是，您需要将它们保存为包含字符和数字的串联字符串。

您还可以查看链接here 以检查您可以使用的不同输入类型，以防您发现其中一种更适合您使用。但您必须记住的是输入类型将定义键盘布局。您也可以查看this以获得更好的理解。