无法在JavaScript中使用按键访问元素

bfnvny8b 于 2023-06-28 发布在 Java

关注(0)|答案(2)|浏览(118)

我是新的DOM操作，在这里我试图改变颜色的最小方块使用箭头键。我能够使用点击事件访问相同的内容。

<body>
        <div class="container">

            <div class="main-box" id="main-box">
                <div class="moving-box" id="moving-box">
                 </div>
            </div>
        </div>
         <script src="script.js"></script>
    </body>

const box = document.getElementById("moving-box");
const mainBox = document.getElementById("main-box");

box.addEventListener("keypress", function (event) {
    if (event.keyCode === 38) {
        box.style.backgroundColor = red;
    }
})

JavaScript

来源：https://stackoverflow.com/questions/76561508/not-able-to-access-the-element-using-keypress-in-javascript

2条答案

按热度按时间

pvabu6sv1#

键盘箭头没有keypress事件，因为
当按下产生字符值的键时，将激发keypress事件。
https://developer.mozilla.org/en-US/docs/Web/API/Element/keypress_event
所以我们可能应该使用keydown，你也不清楚你是否想在执行事件处理程序时聚焦框。如果是焦点，则需要tabindex="0"，以便框可以接收焦点。否则，将事件侦听器添加到document.body。
还请注意，键盘键可以滚动页面。所以你应该调用event.preventDefault()来停止它。

const box = document.getElementById("moving-box");
const mainBox = document.getElementById("main-box");

box.addEventListener("keydown", function (event) {
    if (event.keyCode === 38) {
        box.style.backgroundColor = 'red';
        event.preventDefault();
    }
})

#moving-box{
  width:100px;
  height:50px;
  border:1px solid gray;
  outline:none;
}

#moving-box+*{
  display:none;
}
#moving-box:focus{
  box-shadow: 0 0 20px rgba(0,0,0,.3);
}
#moving-box:focus+*{
  display:block;
}

<div class="container">Click the box to focus
    <br/>
    <div class="main-box" id="main-box">
        <div class="moving-box" tabindex="0" id="moving-box">
         </div>
         <div class="info">Press arrow up</div>
    </div>
</div>

赞(0）回复(0）举报 2023-06-28

2guxujil2#

我认为问题是event.keyCode已被弃用，你应该尝试event.key（ArrowRight，ArrowLeft，ArrowUp，ArrowDown）
更多信息：https://www.w3schools.com/jsref/event_key_key.asp

赞(0）回复(0）举报 2023-06-28