Form field: setting the input type to "number"

Community resources Product feedback
7

Hey,

I recently had to do this and here are a couple of things I learned.

EMBED ELEMENT - HTML

You can simply use an “embed” element and paste in the html with type=“number”

i.e.
<input class="field w-input" data-name="Phone Number" id="Phone-Number" maxlength="256" name="Phone-Number" placeholder="Enter your phone number" required="required" type="number">

FORMAT NUMBER - JAVASCRIPT

If you’d like to format the number with commas - i.e. 1,000,000 - then DO NOT set the type for the input - simply give the input field a class of format-number

then paste this script into the footer

<script>

 $('input.format-number').keyup(function(event) {

      // skip for arrow keys
      if(event.which >= 37 && event.which <= 40) return;

      // format number
      $(this).val(function(index, value) {
        return value
          .replace(/\D/g, "")
          .replace(/\B(?=(\d{3})+(?!\d))/g, ",")
        ;
      });
    });

</script>

If you want to use a different a different punctuation between the numbers, change the comma to in parentheses at the end of the second .replace line to whatever character you’d like to use

REMOVE NUMBER SPIN BUTTONS - CSS

To remove the number spin buttons that appear in an input field when type=“number”, you can insert this piece of css:

<style>

  input[type=number]::-webkit-inner-spin-button, 
  input[type=number]::-webkit-outer-spin-button { 
      	-webkit-appearance: none; 
      	margin: 0; 
    	}

</style>

Any questions, just ask. Best of luck with it.

4 Likes