我有一个对象,该对象具有创建div的方法,然后为它们分配一个on-click事件,但我也想为它们分配一个onkeypress事件,但是我不允许这样做... >
这是创建div的方法。很好。
populateSquares(){
let relatedTagToPopulation = document.getElementById("questionp");
let whatTextIs = relatedTagToPopulation.textContent;
for (let u=0;u<this.stemQuestions.length;u++){
if (this.stemQuestions[u]==whatTextIs){
var populateSquaresPertinentInt = u;
}
}
for (let i=0;i<this.stemAnswers.length;i++){
if (i==populateSquaresPertinentInt){
let numberOfSquaresToAdd = this.stemAnswers[i].length;
for (let j=0;j<numberOfSquaresToAdd;j++){
let elToAdd = document.createElement("div");
elToAdd.id="ans"+j+"";
elToAdd.className="lans";
elToAdd.onclick= hangmanGame.selectThisSquare;
console.log(elToAdd);
let elToAddInto = document.getElementById("answeri");
elToAddInto.appendChild(elToAdd);
}
}
}
},
这是将一些属性添加到div以及事件侦听器的方法
selectThisSquare(e){
let currentElementId = e.target.id;
document.getElementById(currentElementId).style.cursor = "text";
document.getElementById(currentElementId).style.backgroundColor = "#557a95";
document.getElementById(currentElementId).onkeydown = hangmanGame.textInputHandler;
console.log(e.target.id);
let x = hangmanGame.giveCurrentQuestionAndWord();
let xs = x[1];
hangmanGame.deselectAllOtherSquares(currentElementId,xs);
},
这是应该在按下键时触发的方法,但是什么也不会触发。
textInputHandler(){
console.log(4);
},
答案 0 :(得分:1)
默认情况下,div
是“可选”的,因此不会对任何按键事件做出反应。但是,您可以通过将tabindex="0"
添加到div来使其可选。这样,当您单击它时,它将变得可聚焦,然后将触发onkeydown
事件。
请参见下面的工作示例:
const game = {
addKeyDownListener() {
document.getElementById("txt").onkeydown = game.handleTextInput
},
handleTextInput() {
console.log(4);
}
}
game.addKeyDownListener();
#txt {
height: 100px;
width: 100px;
border: 1px solid black;
outline: none; /* add to hide outline */
}
<div type="text" id="txt" tabindex="0"></div>
注意:默认情况下,添加tabindex
会为您的div
选择一个蓝色轮廓。要删除此内容,请添加css outline: none
。