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

Question

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

---

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

type=text

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

type=number

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

type=tel

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

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

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 (如您所述)是一个受欢迎的选择。