title: JS - Force input number leading zeros
body: <p>I'm trying to force my input[type="number"] elements to add a leading zero whenever the value is smaller than 10. This is a very easy script</p>
  
  <pre><code>jQuery('input[type="number"]').on('change', function() {
      if(jQuery(this).val() &lt; 10) {
          jQuery(this).val('0'+jQuery(this).val());
      }
  });
  </code></pre>
  
  <p>This works fine on chrome but firefox removes every leading zero from number inputs. I know I can use a text or tel type input with a pattern, but it's important for my app that it has the little "+" and "-" arrows to add and decrease 1 respectively.</p>
  
  <p>Is there any way to force firefox to add the leading zeros?</p>
  
  <p><strong>EDIT:</strong></p>
  
  <p>Appaerently you can't change firefox's behaviour towards this type of input... so I changed the ones in my page to <code>&lt;input type="tel" pattern="[0-9]*" max="59" name="minutes"&gt;</code></p>
  
  <p>And added this bit of JS</p>
  
  <pre><code>function add_leading_zero(element) {
      if(jQuery(element).val() &lt; 10)
          jQuery(element).val('0'+jQuery(element).val());
  }
  
  jQuery('input[type="tel"]').keydown(function(e) {
      var max = jQuery(this).attr('max');
      var val = parseInt(jQuery(this).val());
      switch(e.keyCode) {
          case 38: // arrow up
              if(val &lt; max) {
                  jQuery(this).val(val+1);
                  add_leading_zero(this);
              }
          break;
          case 40: // arrow down
              if(val &gt; 0) {
                  jQuery(this).val(val-1);
                  add_leading_zero(this);
              }
          break
          default:
          break;
      }
  });
  </code></pre>