pin input

components.pin-input.js

import Ember from 'ember';

function numberArray(value, requiredLength) {
  let numbers = value.toString().split('').map(n => Number(n));
  if (numbers.length < requiredLength) {
    let n = requiredLength - numbers.length;
    while(n--) {
      numbers.push('');
    }
  }
  return numbers;
}

function isValid(numbers) {
  for (let i = 0; i < numbers.length; i++) {
    if (Ember.isBlank(numbers[i]) || isNaN(numbers[i])) {
      return false;
    }
  }

  return true;
}

function arraysAreEqual(one, two) {
  for (let i = 0; i < one.length; i++) {
    if (one[i] !== two[i]) {
      return false;
    }
  }

  return true;
}

export default Ember.Component.extend({
  didInsertElement() {
    if (this.get('autofocus')) {
      this.$('input:eq(0)').focus();
    }
  },

  // derive an array of numbers from the value
  numbers: Ember.computed('value', 'length', function() {
    const value = this.get('value') || '';
    const length = this.get('length');

    return numberArray(value, length);
  }),

  // whenever an input receives focus, highlight the entire value
  focusIn(event) {
    const index = Number(event.target.getAttribute('data-index'));
    this.$(`input:eq(${index})`).get(0).select();
  },

  input(event) {
    const value = event.target.value;

    // wipe the value if it's not a number
    if (isNaN(Number(value))) {
      event.target.value = '';
      return;
    }

    // the index of the input is stored in a data- attribute
    const index = Number(event.target.getAttribute('data-index'));

    // copy the numbers array and mutate it at the specified index
    const oldNumbers = this.get('numbers');
    const newNumbers = oldNumbers.slice(0);
    newNumbers[index] = value.toString();

    // override the computed property to store the new array as local state
    // so we can compare against in when the next event occurs
    this.set('numbers', newNumbers);

    // fire the action iff the value is valid and and not equal to the old value
    if (isValid(newNumbers) && !arraysAreEqual(oldNumbers, newNumbers)) {
      this.action(newNumbers.join(''));
    }

    const length = this.get('length');

    // skip to the next input if one exists
    if (value && index < length - 1) {
      this.$(`input:eq(${index + 1})`).focus();

    // otherwise select the value in the last one again
    } else if (index === length - 1) {
      Ember.run.scheduleOnce('afterRender', () =>
        this.$(`input:eq(${index})`).get(0).select()
      );
    }
  }
});

controllers.application.js

import Ember from 'ember';

export default Ember.Controller.extend({
  value: null
});

templates.application.hbs

{{pin-input value=value length=4 action=(action (mut value))}}

current value: {{value}}

templates.components.pin-input.hbs

{{~#each numbers key="@index" as |number index|~}}
	<input type="text"
  			 placeholder="0"
         maxlength=1
         size=1
         style="width: 20px"
         value={{number}}
         data-index={{index}} />
{{/each}}

twiddle.json

{
  "version": "0.10.4",
  "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.7.0",
    "ember-data": "2.7.0",
    "ember-template-compiler": "2.7.0"
  },
  "addons": {}
}