title: Credit card number format
body: <p>I'm trying to create a nifty credit card number input field that automatically formats a credit card number as a user types it in. Here's what I have:</p>
  
  <pre><code># Whenever the credit card input changes, update its value.
  $(".credit-card-number").on "input", -&gt;
  
    # 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)
  </code></pre>
  
  <p>This works perfectly on the following HTML:</p>
  
  <pre><code>&lt;input class="credit-card-number" id="credit_card_number" name="credit_card_number" placeholder="Credit card number" type="text"&gt;
  </code></pre>
  
  <p>However, if I set the input's type to <code>number</code>, whenever I update the value and the value contains a space, Chrome changes the value to the empty string. Any ideas?</p>