使用 disabled="disabled" 方式来禁用元素，并确保页面加载时自动禁用 div 内的所有交互元素。以下是完整的示例代码：
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Disable Interaction</title>
<style>
.disabled {
opacity: 0.5; /* 可选：使元素看起来像是被禁用 */
}
</style>
</head>
<body>
<div class="disabled" id="disabledDiv">
<button>Button 1</button>
<input type="text" value="Text input">
<input type="checkbox" checked> Checkbox
<select>
<option>Option 1</option>
<option>Option 2</option>
<option>Option 3</option>
</select>
<a href="#">Link</a>
</div>
<script>
function disableElements() {
const elements = document.querySelectorAll('#disabledDiv button, #disabledDiv input, #disabledDiv select, #disabledDiv a');
elements.forEach(element => {
element.disabled = true; // 设置 disabled 属性
element.tabIndex = -1; // 设置 tabIndex 属性
if (element.tagName === 'A') {
element.onclick = function() {
return false;
};
}
});
}
// 在页面加载时执行
window.onload = disableElements;
</script>
</body>
</html>
解释
-
HTML 部分：
- 包含了各种类型的元素：按钮、文本输入框、复选框、下拉列表和链接。
-
CSS 部分：
opacity: 0.5;是可选的，用于使元素看起来像是被禁用的效果。
-
JavaScript 部分：
disableElements函数用于禁用所有交互元素。- 使用
element.disabled = true;来设置disabled属性，使元素不可交互。 - 使用
element.tabIndex = -1;来确保元素不可聚焦。 - 对于链接，添加
onclick事件处理程序，阻止其默认行为。 - 使用
window.onload = disableElements;确保在页面加载时执行disableElements函数，从而禁用div内的所有交互元素。
这样可以确保在页面初始化时就自动禁用 div 内的所有交互元素，包括按钮、文本输入框、复选框、下拉列表和链接。
