如何从网格中的 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中的完整代码，包括所有Divs，CSS，HTML和JS代码：

Answer 1

https://codepen.io/codmitu/pen/pen/pen/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 = ""
})