我正在尝试创建一个漂亮的信用卡号输入字段,该字段会在用户输入时自动格式化信用卡号。这就是我所拥有的:
# 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 都会将值更改为空字符串。有任何想法吗?