只提供思路
<body>
<style>
.list {
display: flex;
align-items: center;
height: 80px;
}
.list .item {
width: 40px;
height: 40px;
border: 1px solid #ccc;
text-align: center;
background: #ccc;
margin: 0 5px;
border-radius: 3px;
outline: none;
}
</style>
<div>
<div class="list">
<input class="item" readonly="readonly" type="text" />
<input class="item" readonly="readonly" type="text" />
<input class="item" readonly="readonly" type="text" />
<input class="item" readonly="readonly" type="text" />
<input class="item" readonly="readonly" type="text" />
<input class="item" readonly="readonly" type="text" />
</div>
</div>
<script>
var str = ''
var listDom = document.querySelector('.list');
listDom.addEventListener('keyup', keyup);
function setInput() {
var list = listDom.children;
[...list].forEach((e, i) => {
e.value = str[i] || ''
})
}
function keyup({ keyCode, key }) {
if (str.length >= 6 && keyCode != 8) return;
if (key >= 0 && key <= 9) str += key
if (keyCode == 8) str = str.substr(0, str.length - 1);
setInput()
}
</script>
</body>
网友评论