有没有办法在不使用 javascript 的情况下格式化信用卡信息的输入字段？答案

【问题标题】：Is there a way to format the input field for credit card info without using javascript?有没有办法在不使用 javascript 的情况下格式化信用卡信息的输入字段？
【发布时间】：2020-03-14 02:28:19
【问题描述】：

我的意思是输入字段需要格式化为四位数的数字集，中间有一个空格。我知道有很多 javascript 插件可以做到这一点，但这是一个可访问性问题，我很惊讶 Web 标准尚未考虑此要求。

我有以下带有一些 CSS 的输入字段开始...

form.order>input.card {
  border: 0;
  padding: 2.5vmin 5vmin;
  border-radius: 10vmin;
  background-color: transparent;
  color: #111111;
  outline: 0;
  font-size: 1em;
  width: 60vmin;
  border: 1px solid violet;
}

<form class="order">
  <input class="card" type="number" placeholder="xxxx xxxx xxxx xxxx" />
</form>

【问题讨论】：

这能回答你的问题吗？ What is the correct input type for credit card numbers?
不，它没有。输入类型不同于输入字段的可格式化性。这是一个 CSS 问题，而不是数据类型。
您为什么认为这是一个可访问性问题（我可以理解插件会导致问题，但 JavaScript 本身就是一个问题？）？我假设您希望在键入时进行实时分组，或者可以根据您的需要将它们分组到 blur 上吗？没有 JavaScript 的要求纯粹是因为您在插件添加随机字符方面有过不好的体验吗？
filamentgroup.github.io/politespace/demo/demo.html 即这是否适合您的需求（作为基础/概念，它需要一些改进，我的意思是该概念适合您的需求），它仅格式化数据模糊所以是不引人注目的。
很难看到输入的数字，除非它们以四个为一组进行分组并发现错误。实时分组正是我的想法，这可以通过四个样式输入框来实现，但这只是另一个技巧。

标签： html css forms accessibility

【解决方案1】：

你可以用这个

 <input id="cc" type="text" data-inputmask="'mask': '9999 9999 9999 9999'" />

【讨论】：

这个答案是错误的。您的 data-inputmask 字段需要脚本来进行增强。