How to implement an input for entering code?

Question

JavaScript

How to implement an input that consists of several inputs. When filling with one value of one input, it automatically switched to another. and how to send data from several of these imputs as a single code?

Answer 1

You make 3 inputs. Put a condition on the input event for each

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

And to get a single value, just bind each input to a variable or to an array, and then stupidly
UPD: well, here 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(' ');
    }
  }
})