信用卡号码格式

Posted 2021-04-16

我正在尝试创建一个漂亮的信用卡号输入字段，当用户输入时，它会自动格式化信用卡号。这就是我所拥有的：

# Whenever the credit card input changes, update its value.
$(".credit-card-number").on "input", ->

  # retrieve the credit card number
  creditCardNumber = $(this).val()

  # remove everything that's not a number
  creditCardNumber = creditCardNumber.replace(/[^d]+/g, "")

  # ensure the value isn't more than 16 characters long
  creditCardNumber = creditCardNumber[0..15]

  # break apart the value every four numbers
  creditCardNumber = creditCardNumber.match(/.{1,4}/g)

  # insert spaces in the value when the value isn't null
  creditCardNumber = if creditCardNumber? then creditCardNumber.join(" ") else ""

  # set the value
  $(this).val(creditCardNumber)

这适用于以下html：

<input class="credit-card-number" id="credit_card_number" name="credit_card_number" placeholder="Credit card number" type="text">

但是，如果我将输入的类型设置为number，每当我更新值并且值包含空格时，Chrome会将值更改为空字符串。有任何想法吗？

答案

废弃我之前的回答。

您无法拥有空间的原因是因为jQuery正在对您尝试设置的值执行排序验证。数字中不允许有空格，因此它会清除该值。当你输入一封信时，会发生同样的事情。

没有什么能阻止你（至少在Chrome中）将字母输入<input type="number">字段。它只是无效和AFAIK如果您提交表单，该字段将包含一个空值（尚未对此进行测试）。

另一答案

你可以做的另一件事是使用<input type="tel" />而不是number。如果你只想输入数字，我更喜欢在移动设备上使用它来获取数字键盘。

信用卡号码的格式将与tel一起使用。