信用卡號碼格式

我試圖創建一個自動格式化信用卡號碼作爲用戶類型是在一個漂亮的信用卡號碼輸入字段下面是我有：信用卡號碼格式

# 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

信用卡號碼格式

回答

相關問題