Numeric input in Ember.js

Easy way to create a numeric input, which accepts only numbers (i.e. 0-9 and no other characters).

app/components/numeric-input.js

import Ember from 'ember';

export default Ember.TextField.extend({
  tagName: "input",
  type: "number",
  attributeBindings: [ "name", "type", "value", "maxlength", "id" ],
  keyDown: function(e) {
    var key = e.charCode || e.keyCode || 0;
    // allow enter, backspace, tab, delete, numbers, keypad numbers, home, end only.
    return (
      key === 13 ||
      key === 8 ||
      key === 9 ||
      key === 46 ||
      (key >= 35 && key <= 40) ||
      (key >= 48 && key <= 57) ||
      (key >= 96 && key <= 105));
  },
  keyPress: function() {
    var inputValue = this.value || "";
    return (inputValue.length < this.maxlength);
  }
});

And in your template, call it as

{{numeric-input value=mobilePhone name="mobilePhone" id="mobile" maxlength="8" }}

As the number input displays up and down arrow spinners on the right side, to hide them add following CSS:

// hide spinner from number-input
input[type=number] {-moz-appearance: textfield;}
input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

That's it!!