<html>
<div class="Wrap">
<form action="" class="Form" id="Form">
<label for="num01"><input id="num01" name="num" type="text" inputmode="numeric" maxlength="1" value=""></label>
<label for="num01"><input id="num02" name="num" type="text" inputmode="numeric" maxlength="1" value=""></label>
<label for="num01"><input id="num03" name="num" type="text" inputmode="numeric" maxlength="1" value=""></label>
<label for="num01"><input id="num04" name="num" type="text" inputmode="numeric" maxlength="1" value=""></label>
<label for="num01"><input id="num05" name="num" type="text" inputmode="numeric" maxlength="1" value=""></label>
<label for="num01"><input id="num06" name="num" type="text" inputmode="numeric" maxlength="1" value=""></label>
</form>
</div>
</html>
.Wrap {
margin: 0 auto;
}
.Form {
display: flex;
margin-top: 50px;
justify-content: center;
}
.Form label {
margin: 0 15px;
width: 40px;
}
.Form input {
box-sizing: border-box;
width: 100%;
height: 50px;
text-align: center;
font-size: 20px;
font-weight: bold;
}
window.addEventListener('DOMContentLoaded', (event) => {
//target を決める
const target = document.getElementById('Form');
target.addEventListener('paste', (event) => {
//クリップボードの文字列を取得して配列に入れる
let numbers = Array.from(event.clipboardData.getData('text'));
//inputを全て取得
const inputBoxes = document.getElementsByName('num');
//順番に値をいれる
for (let i = 0; i < inputBoxes.length; i++) {
inputBoxes[i].value = numbers[i];
}
});
});
View Compiled
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.