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

Question

我一直在尝试创建一个 wordle 类型的游戏，但我不知道如何从 contenteditable 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 = ""
})

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

How to get user input from contenteditable div in a grid?

html

javascript

css

contenteditable