参考资料

1. HTML DOM 返回文档中锚的数目
2. HTML DOM 重置表单
3. HTML DOM 返回一个表单acceptCharset属性的值
4. HTML DOM 元素
5. HTML DOM 创建一个链接指向一个低分辨率的image
6. HTML DOM弹出下拉列表中被选中的选项的索引
7. HTML DOM添加表格行中的单元格
8. HTML DOM 改变iframe的高度和宽度

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>