HTML入力を12列に分割

Question

anglejsの入力フィールドを1つだけ使用して、画像のような入力フィールドを作成できますか？各ボックスには1つの番号しか入力できません。

<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; 
} 

私は12個の入力ボックスを使用していました。それを行うための他の方法はありますか？ また、jqueryの使用を避ける必要があります。

Answer 1

いいえ、できません。

しかし、ユーザーのバックスペース/入力の利便性を向上させることで、実装を改善できます。ここで

は一例です。

あまりに

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

 
var numberOfInputs = 12; 
 
var inputList = []; 
 

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

 
\t // Get Text 
 
\t var pastedText = undefined; 
 
\t if (window.clipboardData && window.clipboardData.getData) { // IE 
 
\t pastedText = window.clipboardData.getData('Text'); 
 
\t } else if (e.clipboardData && e.clipboardData.getData) { 
 
\t pastedText = e.clipboardData.getData('text/plain'); 
 
\t } 
 
\t 
 
\t // Error? 
 
\t if(!pastedText) return; 
 
\t 
 
\t var digits = pastedText.match(/\d/g); 
 
\t 
 
\t // No digits 
 
\t if(!digits) return; 
 
\t 
 
\t var data = []; 
 
\t for(var i=0; i<digits.length; i++){ 
 
\t data.push(parseInt(digits[i])); 
 
\t }; 
 
\t 
 
\t updateInputs(data); 
 
\t 
 
\t 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){ 
 
\t for(var i=0; i<array.length && i<numberOfInputs; i++) 
 
    \t inputList[i].value = ("" + array[i])[0]; 
 
    for(var i=array.length; i<numberOfInputs; i++) 
 
    \t inputList[i].value = ""; 
 
} 
 

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

 

 
document.getElementById('testInsert').addEventListener('click', function(){ 
 
\t updateInputs([1,2,3,4,5,6,7,8,9,10,11,12]); 
 
}, false); 
 
document.getElementById('testExtract').addEventListener('click', function(){ 
 
\t 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">

そして、ここで： https://jsfiddle.net/cbh0f3xe/1/

編集 貼り付けのサポートが追加されました。