如何使屏幕键盘与内容可编辑div交互

Question

我正在为Wordle类型的游戏创建一个屏幕键盘。我一直在尝试让屏幕键盘真正具有互动性，并在上面的网格中输入正确的字母。(例如，如果用户单击"Q"按钮，则会在其中一个网格框中放入一个Q。(

我曾尝试在Javascript中使用事件侦听器，但也不起作用。我应该尝试用不同的方法来做这件事吗？

这是我的键盘代码：

<div id = "keyboard-totality" style = "position: relative; top: -100px;">
<div class = "back-space">
<button class = "key-button">DEL</button>
</div>
<div class = "first-lane">
<button onClick = "buttonFunctionQ()" class = "key-button">Q</button>
<button class = "key-button">W</button>
<button class = "key-button">E</button>
<button class = "key-button">R</button>
<button class = "key-button">T</button>
<button class = "key-button">Y</button>
<button class = "key-button">U</button>
<button class = "key-button">I</button>
<button class = "key-button">O</button>
<button class = "key-button">P</button>
</div>
<div class = "second-lane">
<button class = "key-button">A</button>
<button class = "key-button">S</button>
<button class = "key-button">D</button>
<button class = "key-button">F</button>
<button class = "key-button">G</button>
<button class = "key-button">H</button>
<button class = "key-button">J</button>
<button class = "key-button">K</button>
<button class = "key-button">L</button>
<button class = "key-button">P</button>
<button class = "key-button">ENTER</button>
</div>
<div class = "third-lane">
<button class = "key-button">Z</button>
<button class = "key-button">X</button>
<button class = "key-button">C</button>
<button class = "key-button">V</button>
<button class = "key-button">B</button>
<button class = "key-button">N</button>
<button class = "key-button">M</button>
</div>

这是我的div代码：

<div class="container" style = "position:relative; left:825px; top:-400px;">
<div onkeypress="return (this.innerText.length <= 0)" contenteditable = "true" id = "amo"></div>
<div onkeypress="return (this.innerText.length <= 0)" contenteditable = "true"></div>
<div onkeypress="return (this.innerText.length <= 0)" contenteditable = "true"></div>
<div onkeypress="return (this.innerText.length <= 0)" contenteditable = "true"></div>
<div onkeypress="return (this.innerText.length <= 0)" contenteditable = "true"></div>
<div onkeypress="return (this.innerText.length <= 0)" contenteditable = "true"></div>
<div onkeypress="return (this.innerText.length <= 0)" contenteditable = "true"></div>
<div onkeypress="return (this.innerText.length <= 0)" contenteditable = "true"></div>
<div onkeypress="return (this.innerText.length <= 0)" contenteditable = "true"></div>
<div onkeypress="return (this.innerText.length <= 0)" contenteditable = "true"></div>
<div onkeypress="return (this.innerText.length <= 0)" contenteditable = "true"></div>
<div onkeypress="return (this.innerText.length <= 0)" contenteditable = "true"></div>
<div onkeypress="return (this.innerText.length <= 0)" contenteditable = "true"></div>
<div onkeypress="return (this.innerText.length <= 0)" contenteditable = "true"></div>
<div onkeypress="return (this.innerText.length <= 0)" contenteditable = "true"></div>
<div onkeypress="return (this.innerText.length <= 0)" contenteditable = "true"></div>
<div onkeypress="return (this.innerText.length <= 0)" contenteditable = "true"></div>
<div onkeypress="return (this.innerText.length <= 0)" contenteditable = "true"></div>
<div onkeypress="return (this.innerText.length <= 0)" contenteditable = "true"></div>
<div onkeypress="return (this.innerText.length <= 0)" contenteditable = "true"></div>
<div onkeypress="return (this.innerText.length <= 0)" contenteditable = "true"></div>
<div onkeypress="return (this.innerText.length <= 0)" contenteditable = "true"></div>
<div onkeypress="return (this.innerText.length <= 0)" contenteditable = "true"></div>
<div onkeypress="return (this.innerText.length <= 0)" contenteditable = "true"></div>
<div onkeypress="return (this.innerText.length <= 0)" contenteditable = "true"></div>
<div onkeypress="return (this.innerText.length <= 0)" contenteditable = "true"></div>
<div onkeypress="return (this.innerText.length <= 0)" contenteditable = "true"></div>
<div onkeypress="return (this.innerText.length <= 0)" contenteditable = "true"></div>
<div onkeypress="return (this.innerText.length <= 0)" contenteditable = "true"></div>
<div onkeypress="return (this.innerText.length <= 0)" contenteditable = "true"></div>
<div onkeypress="return (this.innerText.length <= 0)" contenteditable = "true"></div>
<div onkeypress="return (this.innerText.length <= 0)" contenteditable = "true"></div>
<div onkeypress="return (this.innerText.length <= 0)" contenteditable = "true"></div>
<div onkeypress="return (this.innerText.length <= 0)" contenteditable = "true"></div>
<div onkeypress="return (this.innerText.length <= 0)" contenteditable = "true"></div>
<div onkeypress="return (this.innerText.length <= 0)" contenteditable = "true"></div>
<div onkeypress="return (this.innerText.length <= 0)" contenteditable = "true"></div>
<div onkeypress="return (this.innerText.length <= 0)" contenteditable = "true"></div>
<div onkeypress="return (this.innerText.length <= 0)" contenteditable = "true"></div>
<div onkeypress="return (this.innerText.length <= 0)" contenteditable = "true"></div>
<div onkeypress="return (this.innerText.length <= 0)" contenteditable = "true"></div>
<div onkeypress="return (this.innerText.length <= 0)" contenteditable = "true"></div>
<div onkeypress="return (this.innerText.length <= 0)" contenteditable = "true"></div>
<div onkeypress="return (this.innerText.length <= 0)" contenteditable = "true"></div>
<div onkeypress="return (this.innerText.length <= 0)" contenteditable = "true"></div>
<div onkeypress="return (this.innerText.length <= 0)" contenteditable = "true"></div>
<div onkeypress="return (this.innerText.length <= 0)" contenteditable = "true"></div>
<div onkeypress="return (this.innerText.length <= 0)" contenteditable = "true"></div>
<div onkeypress="return (this.innerText.length <= 0)" contenteditable = "true"></div>
<div onkeypress="return (this.innerText.length <= 0)" contenteditable = "true"></div>
<div onkeypress="return (this.innerText.length <= 0)" contenteditable = "true"></div>
<div onkeypress="return (this.innerText.length <= 0)" contenteditable = "true"></div>
<div onkeypress="return (this.innerText.length <= 0)" contenteditable = "true"></div>
<div onkeypress="return (this.innerText.length <= 0)" contenteditable = "true"></div>
<div onkeypress="return (this.innerText.length <= 0)" contenteditable = "true"></div>
<div onkeypress="return (this.innerText.length <= 0)" contenteditable = "true"></div>
</input>

这是我的javascript代码：

document.addEventListener("keyup", (e) => {
if (guessesRemaining === 0) {
return
}
let pressedKey = String(e.key)
if (pressedKey === "back-space") {
alert("win");
}
if (pressedKey === "Enter") {
checkGuess()
return
}
let found = pressedKey.match(/[a-z]/gi)
if (!found || found.length > 1) {
return
} else {
insertLetter(pressedKey)
}
})

谢谢

Answer 1

用这个做一个测试，如果你有任何意见，请告诉我。我改变了一些风格，把它们重新应用起来。

<div id="keyboard-totality" style=" position: relative; top: 100px;">
<div class="back-space">
<button class="key-button" id="DEL">DEL</button>
</div>
<div class="first-lane">
<button class="key-button" value="Q">Q</button>
<button class="key-button" value="W">W</button>
<button class="key-button" value="E">E</button>
<button class="key-button" value="R">R</button>
<button class="key-button" value="T">T</button>
<button class="key-button" value="Y">Y</button>
<button class="key-button" value="U">U</button>
<button class="key-button" value="I">I</button>
<button class="key-button" value="O">O</button>
<button class="key-button" value="P">P</button>
</div>
<div class="second-lane">
<button class="key-button" value="A">A</button>
<button class="key-button" value="S">S</button>
<button class="key-button" value="D">D</button>
<button class="key-button" value="F">F</button>
<button class="key-button" value="G">G</button>
<button class="key-button" value="H">H</button>
<button class="key-button" value="J">J</button>
<button class="key-button" value="K">K</button>
<button class="key-button" value="L">L</button>
<button class="key-button" value="P">P</button>
<button class="key-button" value="&nbsp;">ENTER</button>
</div>
<div class="third-lane">
<button class="key-button" value="Z">Z</button>
<button class="key-button" value="X">X</button>
<button class="key-button" value="C">C</button>
<button class="key-button" value="V">V</button>
<button class="key-button" value="B">B</button>
<button class="key-button" value="N">N</button>
<button class="key-button" value="M">M</button>
</div>

<div class="container"
style="position:absolute; left:400px;float: right; width: 400px; background-color: green;">
<div onkeypress="return (this.innerText.length <= 0)" contenteditable="true" id="amo"></div>
<div onkeypress="return (this.innerText.length <= 0)" contenteditable="true"></div>
<div onkeypress="return (this.innerText.length <= 0)" contenteditable="true"></div>
<div onkeypress="return (this.innerText.length <= 0)" contenteditable="true"></div>
<div onkeypress="return (this.innerText.length <= 0)" contenteditable="true"></div>
<div onkeypress="return (this.innerText.length <= 0)" contenteditable="true"></div>
<div onkeypress="return (this.innerText.length <= 0)" contenteditable="true"></div>
<div onkeypress="return (this.innerText.length <= 0)" contenteditable="true"></div>
</div>
</div>
<script>
let keys = document.getElementById('keyboard-totality').querySelectorAll(".key-button");
keys.forEach(key => {
key.addEventListener('click', e => {
let firstElement = document.getElementById('amo');
if (e.target.id == 'DEL') {
let tags = firstElement.parentNode.children;
for(let i = tags.length -1; i>=0; i--){
if( tags[i].innerHTML != ""){
tags[i].innerHTML = "";
return;
}
}                
} else {
addOnNextElement(e.target.value,firstElement);
}
})
});
function addOnNextElement(key,target){
console.log(key);
if(target.nextElementSibling.innerHTML == ""){
target.nextElementSibling.innerHTML = key;
}
else{
addOnNextElement(key,target.nextElementSibling);
}
}
</script>