HTML Input Divided Into 12 columns

Question

Can we create a input field like in the image using only one input field in angularjs. Each box should allow only one number.

<li><input type="text" maxlength="1" onkeypress="return isNumber(event,$(this))"></li>
<li><input type="text" maxlength="1" onkeypress="return isNumber(event,$(this))"></li>
<li><input type="text" maxlength="1" onkeypress="return isNumber(event,$(this))"></li>
<li><input type="text" maxlength="1" onkeypress="return isNumber(event,$(this))"></li>
<li><input type="text" maxlength="1" onkeypress="return isNumber(event,$(this))"></li>
<li><input type="text" maxlength="1" onkeypress="return isNumber(event,$(this))"></li>
<li><input type="text" maxlength="1" onkeypress="return isNumber(event,$(this))"></li>
<li><input type="text" maxlength="1" onkeypress="return isNumber(event,$(this))"></li>
<li><input type="text" maxlength="1" onkeypress="return isNumber(event,$(this))"></li>
<li><input type="text" maxlength="1" onkeypress="return isNumber(event,$(this))"></li>
<li><input type="text" maxlength="1" onkeypress="return isNumber(event,$(this))"></li>
<li><input type="text" maxlength="1" onkeypress="return isNumber(event,$(this))"></li>

function isNumber(evt,ele) {
evt = (evt) ? evt : window.event;
var charCode = (evt.which) ? evt.which : evt.keyCode;
if (charCode > 31 && (charCode < 48 || charCode > 57)) {
    return false;
}
if(ele.val().length == 0){
    ele.parent().next().children('input').focus();
}


  return true;
}

I did using twelve input boxes. Is there any other way to do it. I also need to avoid using jquery.

Answer 1

No, you can not.

But you can improve your implementation by improving backspace/typing convenience for the user.

Here is an example:

var wrapper = document.getElementById('myInputWrapper');

var numberOfInputs = 12;
var inputList = [];

for(var i=0; i<numberOfInputs; i++){
	var input = document.createElement('input');
  input.type = "text";
  input.setAttribute('data-number', i+1);
	inputList.push(input);
	wrapper.appendChild(input);
  input.addEventListener('keydown', function(e){
		// If backspace
		if(isBackspace(e)){
    	if(this.value.length == 0){
    		var previus = parseInt(this.getAttribute('data-number')) - 2;
      	if(previus >= 0){
    		inputList[previus].focus();
      	}
      }
      return true;
    }
    // If isNumber
  	else if(isNumber(e)){
    	if(this.value.length > 0){
      	this.value = this.value[this.value.length - 1];
        var next = parseInt(this.getAttribute('data-number'));
        if(next < numberOfInputs){
        	if(inputList[next].length > 0)
          	inputList[next].value = "";
          inputList[next].focus();
        } else {
        	this.value = "";
        }
      }
    	return true;
		}
		e.preventDefault();
		return false;
  }, false);
  // Put curet on the end
  input.addEventListener('click', function(e){
  	this.value = this.value;
  }, false);
  // oh.. someone has paste something
  input.addEventListener('paste', function(e){

	// Get Text
	var pastedText = undefined;
	if (window.clipboardData && window.clipboardData.getData) { // IE
	  pastedText = window.clipboardData.getData('Text');
	} else if (e.clipboardData && e.clipboardData.getData) {
	  pastedText = e.clipboardData.getData('text/plain');
	}
	
	// Error?
	if(!pastedText) return;
	
	var digits = pastedText.match(/\d/g);
	
	// No digits
	if(!digits) return;
	
	var data = [];
	for(var i=0; i<digits.length; i++){
	  data.push(parseInt(digits[i]));
	};
	
	updateInputs(data);
	
	e.preventDefault();
  }, false);
}

function isNumber(evt) {
  evt = (evt) ? evt : window.event;
  var charCode = (evt.which) ? evt.which : evt.keyCode;
  if (charCode > 31 && (charCode < 48 || charCode > 57) && charCode != 8) {
      return false;
  }
  return true;
}

function isBackspace(evt) {
  evt = (evt) ? evt : window.event;
  var charCode = (evt.which) ? evt.which : evt.keyCode;
  if (charCode == 8) {
      return true;
  }
  return false;
}

function updateInputs (array){
	for(var i=0; i<array.length && i<numberOfInputs; i++)
  	inputList[i].value = ("" + array[i])[0];
  for(var i=array.length; i<numberOfInputs; i++)
  	inputList[i].value = "";
}

function getInputs (array){
	var data = [];
	for(var i=0; i<numberOfInputs; i++)
  	if(inputList[i].value.length == 1)
  		data.push(inputList[i].value);
    else
    	data.push(null);
  return data;
}


document.getElementById('testInsert').addEventListener('click', function(){
	updateInputs([1,2,3,4,5,6,7,8,9,10,11,12]);
}, false);
document.getElementById('testExtract').addEventListener('click', function(){
	alert(getInputs());
}, false);

#myInputWrapper input{
  width: 20px;
  height: 20px;
  line-height: 20px;
  text-align: center;
  border: 1px solid #afafaf;
}
#myInputWrapper input:not(:first-child) {
    border-left: 0px;
}

<div id="myInputWrapper"></div>
<br>
<input type="button" value="Test Data Insert" id="testInsert">
<input type="button" value="Test Data Extract" id="testExtract">

And here too: https://jsfiddle.net/cbh0f3xe/1/

Edit Paste support added.