如何从网格中的contenteditable div获得用户输入

Question

我一直在尝试创建一个wordle类型的游戏，但我不知道如何从内容可编辑的div中获得用户输入。我想做的是，如果用户输入字母"a"，例如，div中的字母将变为绿色，而其他div中的其他字母则是不同的颜色。

因此，基本上，当用户输入完每个字母进行猜测时，他们会点击回车键，字母"a"就会变成绿色。(在这种情况下，这个词是绝对的(此外，如果可能的话，确保用户在实现该功能之前实际填写了行中的所有框。

let word = "absolute";

function inputFunc() {
event.target.nextElementSibling.focus();
}
document.getElementById('amo1').addEventListener('keypress', function(e) {
document.getElementById('amo1').value = this.innerHTML;
});

以下是我在JSFiddle中的完整代码，包括所有div、CSS、HTML和JS代码：https://jsfiddle.net/Infui/c7q30gez/1/

Answer 1

https://codepen.io/codmitu/pen/LYegzNN?editors=0011

html:

<p>absolute</p>
<div contenteditable="true" style="border: 5px solid; padding: 5px"></div>
<button>check</button>

js:

const pText = document.querySelector("p").innerText
const div = document.querySelector("div")
const button = document.querySelector("button")

button.addEventListener("click", () => {
const text = div.textContent
//checking for numbers
if (text.match(/d/gi)) {
div.innerText = text
return 
}
div.innerHTML = ""
text.split("").forEach(letter => {
if (pText.includes(letter)) {
div.innerHTML += `<span style="color: green">${letter}</span>`
} else {
div.innerHTML += `<span style="color: grey">${letter}</span>`
}
})
})
//blur the div if text is longer than 8 letters
div.addEventListener("keydown", (e) => {
if (div.innerText.length > 7 || e.keyCode == 32) {
div.blur()
}
})
//clear on focus
div.addEventListener("focus", () => {
div.innerHTML = ""
})