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

Question

TLDR:哪种输入类型可以使用移动数字键盘并实现屏蔽注入空间和CVV和信用卡输入的最大限制,例如:XXXX XXXX XXXX XXXX

---

在构建表单时,我已经看到围绕正确的信用卡输入类型的不同程度的一致性.以下是我发现的每个方面的优缺点:

类型=文本

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

类型=数

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

类型=电话

• 能够正确掩盖并在各处使用,但可能对可访问性程序和自动填充器产生未知影响.如果有人可以澄清使用此输入类型的潜在副作用,那将是非常棒的!

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

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（正如你提到的）是一个流行的选择。

Answer 2

type="tel"由于你提到的原因，我\xe2\x80\x99在很多地方都看到过使用。

\n\n

我不建议type="number"您这样做，因为您必须摆弄 in/decrement 箭头等。从某些角度来看，就我们通常对数字所做的事情而言，它不是 \xe2\x80\x9cnumber\xe2\x80\x9d （数学） ），请参阅CSS 技巧论坛上的评论。

\n\n

如何强制数字键盘的另一个技巧是使用pattern="[0-9]*". 这应该仅适用于 iOS。要使其也能在 Android 上运行，您必须将其与type="tel".

\n

Answer 3

有一个inputmode为此设计的属性，它尚未实现（实际上在 HTML 5.2 中已弃用），但已经对其进行了工作（FF/Chrome）。

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input

并查看此讨论： https://github.com/whatwg/html/issues/3290

现在将自动完成属性设置为正确的值： https://developers.google.com/web/updates/2015/06/checkout-faster-with-autofill

或像您现在使用的那样使用掩码实现自定义输入。