移动键盘上字母数字的html 5输入类型

Posted 2023-02-22

【中文标题】移动键盘上字母数字的html 5输入类型

【英文标题】：html 5 input type for alphanumeric on mobile keyboard

【发布时间】：2016-10-05 16:59:27

【问题描述】：

我们已经看到，当在移动键盘上选择输入类型“文本”时，它会出现文本，当在移动键盘上选择输入类型“数字”时，它只会出现数字。 And when input type password fields are selected then it comes up with both alphabet and numbers.当输入字段不是密码而是纯文本时，有什么方法可以在键盘上同时显示字母和数字？？

希望你得到我的询问。 谢谢。

【问题讨论】：

使用type=tel它显示带有字母的数字。

我了解“tel”输入是如何工作的，但我想要更流畅一些，我已经编辑了主要帖子，当按下密码字段时会显示这个键盘，正常输入也可以这样吗？

有个插件叫jQKeyboard。它应该为您提供您要创建的 UI。 jqueryscript.net/other/…

谢谢。变得充满希望，但如果我在移动设备上尝试这个，它会在这个内置键盘下方打开正常的默认键盘。

【参考方案1】：

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

这应该也可以，使用type="number"。

【参考方案2】：

试试：

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

html5.1之前通过css：

 input[type=number] 
    -webkit-text-security: disc;

【参考方案3】：

请参阅this 示例，了解移动设备上不同类型的键盘输入。

最接近你愿望的键盘可能是“密码”键盘：

<input type="password">