Как реализовать инпут для ввода кода?

Question

[frolova_elena]

Как реализовать ввод который состоит из не скольких инпутов . При заполнении на одно значении одного инпута переключался автоматически на другой . и как отправить данные из нескольких этих импутов как единый код?

Answer 1

[Владимир Проскурин]

Делаете 3 инпута. Ставите на каждый условие на событие input

если длинна моего значения больше (например) трех
   то переключаем фокус на следующее поле
иначе
   ничего не делаем

А чтобы получить единое значение, просто каждый инпут привяжите к переменной или в массив, и потом тупо
res = var1 + var2 + var3

UPD: ну вот https://jsfiddle.net/6et10ab5/

<div id="app">
  <input @keyup="changeInput($event, 1)" ref="input_1" :value="inputs[0]" :maxlength="maxlength">
  <input @keyup="changeInput($event, 2)" ref="input_2" :value="inputs[1]" :maxlength="maxlength">
  <input @keyup="changeInput($event, 3)" ref="input_3" :value="inputs[2]" :maxlength="maxlength">
  <div>
    <span>{{ resultInputs }}</span>
  </div>
</div>

new Vue({
  el: "#app",
  data: {
    maxlength: 10,
    inputs: ['', '', '']
  },
  methods: {
  	changeInput: function(event, input){
    	var val = event.target.value;
    	if(val.length >= this.maxlength) {
      	var next = this.$refs['input_' + (input+1)];
        if(next) {
        	next.focus();
        } else {
        	event.preventDefault();
        }
      }
      this.$set(this.inputs, input-1, val);
    }
  },
  computed: {
  	resultInputs: function() {
    console.warn(this.inputs);
    	return this.inputs.join(' ');
    }
  }
})

Comments

[eeeman1]

не робит в полной мере, когда стираешь в каком-либо инпуте всё, то он не переходит на прошлый