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

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

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

看到这个讨论： https://github.com/whatwg/html/issues/3290

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

或使用现在正在使用的蒙版实现自定义输入。

Answer 3

由于您提到的原因，我在很多地方都使用过type="tel"。

我不建议使用type="number"，因为那样的话您就不得不弄弄in / decre箭头等。从某些角度来看，就我们通常对数字（数学）所做的操作而言，它不是“数字” ，请参阅here。

另一个强制数字键盘的技巧是使用pattern="[0-9]*"。 this comment on CSS tricks forum。要使其在Android上也能正常运行，您必须将其与type="tel"结合使用。

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

3 个答案:

HTML

JavaScript