使用"keyup"上的输入值更新元素的内部文本

Question

我正在FrontEndMentor.io的这个挑战中练习JS，只需要帮助我弄清楚如何获得想要的结果。

我的目标是让类演示编号上的"0000 0000 0000 0000"在键入值时单独更新。例如，您键入"234"，它会将卡号更新为"2340 0000 0000 0000"。。。依此类推，直到16位数字。

[CodePen-交互式卡片详细信息]https://codepen.io/jdubtheegreat/pen/JjvZMBJ?editors=0010

const demoName = document.querySelector('.demo-name');
const demoNum = document.querySelector('.demo-number');
const demoExpMM = document.querySelector('.demo-exp-mm');
const demoExpYY = document.querySelector('.demo-exp-yy');
const demoCvc = document.querySelector('.demo-cvc');
const cardName = document.getElementById('cardholder');
const cardNum = document.getElementById('card-num');
const cardExpMM = document.getElementById('exp-month');
const cardExpYY = document.getElementById('exp-year');
const cardCvc = document.getElementById('cvc');
addEventListener('keyup', () => {
if (cardNum.value) {
let demoNumArray = Array.from(document.querySelector('.demo-number').innerText);
demoNumArray = demoNumArray.filter(function (entry) { return entry.trim() != ''; });
const cardNumArray = Array.from(cardNum.value);
for (let i = 0; i < cardNumArray.length; i++) {
if (cardNumArray[i] !== undefined) {
demoNum.innerText = demoNumArray.splice(demoNumArray[i], 1, cardNumArray[i]);
} else {
demoNumArray[i] = '0';
}
};
};
});

<div class="card-front">
<div class="demo-info">
<img src="https://raw.githubusercontent.com/meetjoewarren/learning-center/d05d53a12adeaa32e9b21bb033049fce570d460d/frontend-mentor/interactive-card-details-form-main/images/card-logo.svg" alt="Card Logo">
<span class="demo-number">0000 0000 0000 0000</span>
<span class="demo-name">Jane Appleseed</span>
<span class="demo-exp">
<span class="demo-exp-mm">00</span>/<span class="demo-exp-yy">00</span>
</div>
</div>
<div class="card-back">
<span class="demo-cvc">000</span>
</div>
<div class="cardholder-content">
<div class="card-form">
<label for="cardholder">Cardholder Name</label>
<input type="text" id="cardholder" name="cardholder" placeholder="e.g. Jane Appleseed" required>
<label for="card-num">Card Number</label>
<input type="text" id="card-num" name="card-num" placeholder="e.g. 1234 5678 9123 0000" maxlength="16" onkeyup="this.value = this.value.replace(/[^0-9]/, '')" required>
<label for="exp-date" class="min-content">Exp. Date (MM/YY)</label>
<label for="cvc" class="min-content">CVC</label><br >
<input type="number" id="exp-month" name="exp-month" placeholder="MM" maxlength="2" style="margin-right: 10px;" required>
<input type="number" id="exp-year" name="exp-year" placeholder="YY" minlength="2" maxlength="2" required>
<input type="text" id="cvc" name="cvc" placeholder="e.g. 123" maxlength="3" onkeyup="this.value = this.value.replace(/[^0-9]/, '')" required>
<button type="submit" class="submit">Confirm</button>
</div>
</div>
</div>

GitHub上JS部分注释掉的代码会更新卡片，但在键入时会擦除演示卡上的整个字符串

TIA感谢您提供的任何帮助！

Answer 1

您可以使用方法padStart或padEnd用0数字填充cardNum值，直到达到所需的大小

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/padStart

const demoNum = document.querySelector('.demo-number');
const cardNum = document.getElementById('card-num');
cardNum.addEventListener('keyup', () => {
if (cardNum.value) {        
demoNum.innerText = cardNum.value.padEnd(16, '0').replace(/(.{4})/g, '$1 ');
};
});

.demo-number {
border: solid blue;
}
#card-num {
border: solid green;
}

<div class="card-front">
<div class="demo-info">
<img src="https://raw.githubusercontent.com/meetjoewarren/learning-center/d05d53a12adeaa32e9b21bb033049fce570d460d/frontend-mentor/interactive-card-details-form-main/images/card-logo.svg" alt="Card Logo">
<span class="demo-number">0000 0000 0000 0000</span>
<span class="demo-name">Jane Appleseed</span>
<span class="demo-exp">
<span class="demo-exp-mm">00</span>/<span class="demo-exp-yy">00</span>
</div>
</div>
<div class="card-back">
<span class="demo-cvc">000</span>
</div>
<div class="cardholder-content">
<div class="card-form">
<label for="cardholder">Cardholder Name</label>
<input type="text" id="cardholder" name="cardholder" placeholder="e.g. Jane Appleseed" required>
<label for="card-num">Card Number</label>
<input type="text" id="card-num" name="card-num" placeholder="e.g. 1234 5678 9123 0000" maxlength="16" onkeyup="this.value = this.value.replace(/[^0-9]/, '')" required>
<label for="exp-date" class="min-content">Exp. Date (MM/YY)</label>
<label for="cvc" class="min-content">CVC</label><br>
<input type="number" id="exp-month" name="exp-month" placeholder="MM" maxlength="2" style="margin-right: 10px;" required>
<input type="number" id="exp-year" name="exp-year" placeholder="YY" minlength="2" maxlength="2" required>
<input type="text" id="cvc" name="cvc" placeholder="e.g. 123" maxlength="3" onkeyup="this.value = this.value.replace(/[^0-9]/, '')" required>
<button type="submit" class="submit">Confirm</button>
</div>
</div>
</div>

Answer 2

我的版本

https://codepen.io/mplungjan/pen/bGMjqgj

const zeroes = "0000 0000 0000 0000";
cardNum.addEventListener("input", () => {
const placeholder = [...zeroes];
if (cardNum.value) {
const digits = [...cardNum.value];
let cnt = 0;
placeholder.forEach((_, i) => {
if (cnt>=digits.length) return;
if (placeholder[i] !== " ") placeholder[i] = digits[cnt++];
})
}
demoNum.textContent = placeholder.join("");  
});