信用卡号码格式答案

【问题标题】：Credit card number format信用卡号码格式
【发布时间】：2018-01-02 17:12:12
【问题描述】：

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

# 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 都会将值更改为空字符串。有什么想法吗？

【问题讨论】：

是的，如果您希望值中有空格，请不要使用number 输入。
为什么需要将类型设置为number而不是text？
您可以使用正则表达式检查您的号码格式。由于本地化问题，我个人从不信任浏览器关于数字、小数的问题
之所以要使用数字输入是因为输入中包含的值是一个数字。这是要使用的语义正确的输入。此外，在移动设备上，它会显示数字键盘而不是全键盘。

标签： javascript jquery coffeescript

【解决方案1】：

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

信用卡号的格式适用于tel。

【讨论】：

【解决方案2】：

放弃我之前的答案。

你不能有空间的原因是因为 jQuery 正在对你试图设置的值执行排序验证。数字中不允许有空格，因此它正在清除值。当您输入一个字母时，会发生完全相同的事情。

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

【讨论】：

太棒了。至少现在我知道问题出在哪里。也许是时候提交我的第一个 jQuery 补丁了。 :) 感谢您的帮助。