HTML

如果你想严格地用HTML来做这件事，我相信下面的内容会让你尽可能地接近：

<form>
  <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" required>

  <button>Submit</button>
</form>

字符串

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

JavaScript

对于一个更健壮的解决方案，JavaScript将是必需的。与其推出自己的解决方案，最好使用经过战斗测试的库。Cleave.js（如您所提到的）是一个流行的选择。

我看到在很多地方使用type="tel"，原因你提到。
我不会推荐type="number"，因为那样你就必须摆弄in/decrement arrows等。从某种Angular 来看，它不是一个“数字”，就我们通常用数字（数学）做的事情而言，请参阅CSS技巧论坛上的这篇评论。
如何强制数字键盘的另一个技巧是使用pattern="[0-9]*".这个should work on iOS only.为了使它在Android上工作，以及，你必须将它与type="tel"合并.

有一个属性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
或者像你现在使用的一样，用掩码实现一个自定义的输入。