input-phone

components.input-phone.js

import Ember from 'ember';
import { parse, parseNumber, format, formatNumber, isValidNumber } from 'libphonenumber-js';

//const allowedChars = ['+', '0', '1', '2', '3', '4', '5', '6', '7', '8', '9', '(', ')'];

export default Ember.Component.extend({
  tagName: 'input',
  type: 'tel',
  attributeBindings: ['placeholder', 'value', 'type'],
  classNames: ['no_outline'],
  classNameBindings: ['invalid:error'],
  invalid: true,
  allowedChars: ["+", "0", "1", "2", "3", "4", "5", "6", "7", "8", "9"],
  withFormat: true,
  val: null,

  change({ target, key }) {
    let value = target.value;
    let allowedChars = this.get('allowedChars');

    if (value.indexOf('+') === -1) {
      alert(123);
      value = '+' + value;
    }
    this.set('val', target.value);

    let lastChar = value.substr(value.length - 1);

    if (!allowedChars.includes(lastChar) && value.indexOf(key) > -1) {
      value = value.substr(0, value.length - 1);
    }

    if (!allowedChars.includes(key) && value.indexOf(key) > -1) {
      value = value.replace(key, '');
    }

    if (this.get('withFormat')) {
      value = formatNumber(value, 'International', { extended: true });
    } else {
      //target.value = value;
    }

    Ember.run(() => {
      this.set('value', value);
      
      this.set('invalid', !isValidNumber(value));
    });
  },
  keyPress({ target, key }) {
    //this.change({ target, key });
  },
  keyDown({ target, key }) {
    Ember.run.debounce(this, this.change, { target, key }, 300);
  },
  keyUp({ target, key }) {
    Ember.run.debounce(this, this.change, { target, key }, 300);
  }
});

controllers.application.js

import Ember from 'ember';
import { parse, parseNumber, format, formatNumber } from 'libphonenumber-js';

const allowedChars = ['+', '0', '1', '2', '3', '4', '5', '6', '7', '8', '9'];

export default Ember.Controller.extend({

  value: '79053453512',

  actions: {
    change(val, { target, key }) {
      let value = target.value;

      if (value.indexOf('+') === -1) {
        value = '+' + value;
      }
      
      let lastChar = value.substr(value.length - 1);

      if (!allowedChars.includes(lastChar)) {
        value = value.substr(0, value.length - 1);
      }
      
      if (!allowedChars.includes(key) && value.indexOf(key) > -1) {
        value = value.replace(key, '');
      }
      
      target.value = formatNumber(value, 'International');
      //target.value = value;
      
      Ember.run(() => {
        this.set('value', target.value);
      });
    }
  }
});

styles.app.css

body {
  margin: 12px 16px;
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-size: 12pt;
}

.error {
  border-color: red;
}
.no_outline {
  outline: none;
}

templates.application.hbs

<p>Запрещенно вводить символы кроме ['+', '0', '1', '2', '3', '4', '5', '6', '7', '8', '9']</p>
<hr>
<p><b>input</b> хелпер</p>
{{input value=value focus-out='focus' key-down='change' key-up='change'}}
<hr>
<p><b>"input-phone"</b> компонент</p>
<p>
1) {{input-phone placeholder='с форматом' val=__value}}
</p>
{{__value}}
<p>
2) {{input-phone placeholder='без формата' withFormat=false}}
</p>
<p>предустановленное значение</p>
3) {{input-phone placeholder='without format' value=value}}
<br>
<br>
value: {{value}} {{__value}}

templates.components.input-phone.hbs

{{yield val}}

twiddle.json

{
  "version": "0.13.1",
  "EmberENV": {
    "FEATURES": {}
  },
  "options": {
    "use_pods": false,
    "enable-testing": false
  },
  "dependencies": {
    "jquery": "https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.3/jquery.js",
    "ember": "2.16.2",
    "ember-template-compiler": "2.16.2",
    "ember-testing": "2.16.2"
  },
  "addons": {
    "ember-data": "2.16.3",
    "ember-libphonenumber-js": "v0.2.2"
  }
}