HTML DOM shift键被按下了吗？

HTML DOM shift键被按下的检测

详细介绍

在HTML DOM中，可以通过事件对象来检测shift键是否被按下。当用户触发键盘或鼠标事件时，事件对象会包含一个shiftKey属性，该属性返回一个布尔值，表示shift键是否处于按下状态。

相关标签

这不是一个HTML标签，而是DOM事件对象的属性，可用于任何可交互的HTML元素，如：

• <button>

• <input>

• <div>

• <a>

• 等等

用法

element.addEventListener('事件类型', function(event) {
    if(event.shiftKey) {
        // shift键被按下的处理逻辑
    } else {
        // shift键未被按下的处理逻辑
    }
});

实例

检测点击时的shift键状态

<button id="myButton">点击我(可按住shift)</button>
<script>
document.getElementById("myButton").addEventListener("click", function(event) {
    if(event.shiftKey) {
        alert("Shift键被按下了!");
    } else {
        alert("Shift键未被按下");
    }
});
</script>

检测键盘事件时的shift键状态

<input type="text" id="myInput">
<script>
document.getElementById("myInput").addEventListener("keydown", function(event) {
    console.log("Shift键状态:", event.shiftKey);
});
</script>

功能

event.shiftKey属性可以用于：

1. 实现组合键功能

2. 扩展点击行为(例如shift+点击执行不同操作)

3. 创建快捷键功能

4. 实现多选功能(配合鼠标事件)

CSS扩展

虽然CSS无法直接检测shift键状态，但可以通过JavaScript添加/移除类来改变样式：

<style>
.shift-active {
    background-color: yellow;
    border: 2px solid red;
}
</style>

<div id="myDiv">按住shift键改变我的样式</div>

<script>
document.addEventListener('keydown', function(e) {
    const div = document.getElementById('myDiv');
    if(e.key === 'Shift') {
        div.classList.add('shift-active');
    }
});

document.addEventListener('keyup', function(e) {
    const div = document.getElementById('myDiv');
    if(e.key === 'Shift') {
        div.classList.remove('shift-active');
    }
});
</script>