信用卡号码格式

我试图创建一个自动格式化信用卡号码作为用户类型是在一个漂亮的信用卡号码输入字段下面是我有：信用卡号码格式

# 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，每当我更新值和值包含空格，浏览器将值更改为空字符串。有任何想法吗？

来源

2013-07-03 LandonSchropp

是的，只要不要在数值中使用数字输入。 – mekwall

为什么你需要将类型设置为'number'而不是'text'？ –

你可以使用正则表达式来检查你的数字格式。由于本地化问题，我个人从不相信浏览器对数字和小数的要求 – sotn

废弃我以前的答案。

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

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

来源

2013-07-03 06:52:28

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

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

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

来源

2013-09-20 12:10:16 liima

信用卡号码格式

回答

相关问题