1. Overview
Challenge & starter files: Advent of JS
Full codes: nilstarbb/advent-of-js/10-4-digit-code
Live Demo: 11 - Four Digit Code || Advent of JavaScript
Preview:
2. Details
Users should be able to:
- type in a digit and automatically be taken to the next input
- paste in a 4 digit code
3. Coding
逻辑如下:
- 当 input value 的 length 达到上限(
maxlength="1"
)时,自动 focus 到下一个 input。 - 对 input 进行粘贴时,将粘贴的字符串拆成单独的字符数组,用循环按序设置为 input 的 value。(详见:Element: paste event - Web APIs | MDN)
额外的 validation:
- 只允许非空白值或数字粘贴。
完整代码:
const autoFocus = (e) => {
if (e.target.value.length == 1 && e.target.nextElementSibling) {
e.target.nextElementSibling.focus();
}
};
const autoPaste = (e) => {
e.preventDefault();
// const pasteVal = e.clipboardData.getData("text").replace(/\s+/g, '').split(""); // remove whitespace
const pasteVal = e.clipboardData.getData("text").replace(/\D/g,'').split(""); // remove non-numeric
let currentInput = e.target;
let i = 0;
while (currentInput && pasteVal[i]) {
currentInput.value = pasteVal[i];
i++;
currentInput = currentInput.nextElementSibling;
}
};
const inputs = document.querySelectorAll('input[type="text"');
inputs.forEach((input) => {
input.onkeyup = autoFocus;
input.onpaste = autoPaste;
});