参考资料

1. HTML DOM 返回文档中第一个锚的 innerHTML
2. HTML DOM添加表格中的行
3. HTML DOM改变表格的cellpadding和cellspacing
4. HTML DOM删除下拉列表中的选项
5. HTML DOM改变单元格横跨的列数(colspan属性)
6. HTML DOM 返回图像映射的某个区域的hostname实例
7. HTML DOM 创建一个链接指向一个低分辨率的image
8. HTML DOM 返回一个表单中所有元素的value 实例

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>