信用卡号的正确输入类型是什么？

Question

TLDR： 哪种输入类型可以利用移动数字键盘并实现带有空格注入的屏蔽以及 CVV 和信用卡输入的最大限制，例如：XXXX XXXX XXXX XXXX

---

在构建表单时，我发现围绕信用卡的正确输入类型存在不同程度的一致性。以下是我发现的每个优点和缺点：

类型=文本

• 能够使用各种库轻松屏蔽，例如 cleave.js 或设置 maxLength 属性
• 移动用户不会收到纯数字键盘，除非将范围设置为 [0-9]（只有 iOS 用户会获得这种体验，让 Android 用户使用全键盘）

类型=数字

• 在 iOS 和 Android 上显示正确的键盘，但可以输入不需要的字符并且不能设置 maxLength。 Min 和 Max 不限制用户输入超过 16 个字符，但会在超过最大值时提供错误消息。 *注意，由于删除了前导 0，因此基本上排除了这种输入类型。 （CVV 不可接受）

类型=电话

• 能够正确屏蔽并在所有地方使用，但可能对可访问性程序和自动填充程序产生未知影响。如果有人可以澄清使用这种输入类型的潜在副作用，那就太棒了！

这些都是我想到的类型。如果有人有任何其他建议，请告诉我！

原文由 Micheal Friesen 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

HTML

如果您尝试严格使用 HTML 执行此操作，我相信以下内容将使您尽可能接近：

 <label for="ccn">Credit Card Number:</label>
<input id="ccn" type="tel" inputmode="numeric" pattern="[0-9\s]{13,19}" autocomplete="cc-number" maxlength="19" placeholder="xxxx xxxx xxxx xxxx">

• inputmode 设置键盘类型（在本例中为数字）
• pattern 启用验证（在这种情况下，数字和空格的长度在 13 到 19 之间）并且它有助于键盘类型的浏览器还不支持 inputmode
• autocomplete 告诉浏览器应该自动完成什么（在这种情况下，信用卡号）
• maxLength 防止用户输入超过设置的字符数（在本例中为 19，包括数字和空格）
• placeholder 给用户一个例子（格式提示）

JavaScript

要获得更健壮的解决方案，将需要 JavaScript。与其推出自己的解决方案，不如使用久经考验的库。 Cleave.js （如您所述）是一个流行的选择。

原文由 jabacchetta 发布，翻译遵循 CC BY-SA 4.0 许可协议