我正在try 为一个打字网站实现这一功能，以便输入的每个字符都将包含在一个范围内.然而，我无法想出如何将可编辑文本的自定义文本设置为<div>，而不是<textarea>.
下面是输出的样子.
<div className="typableCustomDiv">
<span>H</span>
<span>E</span>
<span>L</span>
<span>L</span>
<span>O</span>
</div>
我之所以想要将它们包含在一个跨度中以模拟<textarea>，原因如下:
前面的代码文本输入顺序错误，光标位于左侧的固定和退格位置
const typableCustomDiv = document.getElementById('typableCustomDiv');
let inputText = '';
typableCustomDiv.addEventListener('input', handleInput);
typableCustomDiv.addEventListener('keydown', handleKeyDown);
function handleInput(event) {
const typedCharacter = event.data;
if (typedCharacter) {
inputText += typedCharacter;
}
updateDisplayedContent();
}
function handleKeyDown(event) {
//backspace cleanup
if (event.key === 'Backspace') {
// Handle backspace key
inputText = inputText.slice(0, -1);
updateDisplayedContent();
event.preventDefault();
}
}
function updateDisplayedContent() {
typableCustomDiv.innerHTML = '';
for (let i = 0; i < inputText.length; i++) {
const charSpan = document.createElement('span');
charSpan.textContent = inputText[i];
// Let's demonstrate, every 3rd char is wrong
const isIncorrect = i % 3 === 0;
const isCorrect = !isIncorrect;
if (isCorrect) {
charSpan.classList.add('correct', 'fade-in');
} else {
charSpan.classList.add('incorrect', 'fade-in');
}
typableCustomDiv.appendChild(charSpan);
}
}body {
height: 100vh;
display: flex;
align-items: center;
justify-content: center;
}
.typableCustomDiv {
border: 1px solid #ccc;
padding: 10px;
font-size: 18px;
display: inline-block;
height: 1.5rem;
direction: rtl;
}
.correct {
color: green;
}
.incorrect {
text-decoration: line-through;
color: red;
}
.fade-in {
opacity: 0;
animation: fadeIn 0.25s ease forwards;
}
@keyframes fadeIn {
to {
opacity: 1;
}
}<div id="typableCustomDiv" class="typableCustomDiv" contenteditable="true"></div>