参考资料

  1. HTML DOM 鼠标的坐标？
  2. HTML DOM 返回图像映射的某个区域的target的值 实例
  3. HTML DOM 属性
  4. HTML DOM 返回文档中的所有cookies的名称/值对 实例
  5. HTML DOM 用指定的ID弹出一个元素的innerHTML实例
  6. HTML DOM 返回当前的文件和链接的文档之间的关系
  7. HTML DOM改变表格的cellpadding和cellspacing
  8. HTML DOM对单个单元格的内容垂直对齐

HTML DOM 按钮点击后禁用实例

详细介绍

通过HTML DOM可以实现在点击按钮后将其禁用，防止用户重复提交或多次点击。这是通过JavaScript修改按钮的disabled属性实现的。

主要标签

  • <button>: 定义可点击的按钮

  • <input type="button">: 另一种形式的按钮

基本用法

document.getElementById("myButton").disabled = true;

完整实例

<!DOCTYPE html>
<html>
<head>
    <title>按钮禁用示例</title>
    <style>
        .disabled-btn {
            opacity: 0.6;
            cursor: not-allowed;
        }
    </style>
</head>
<body>
    <button id="submitBtn" onclick="disableButton()">提交</button>

    <script>
        function disableButton() {
            var btn = document.getElementById("submitBtn");
            btn.disabled = true;
            btn.classList.add("disabled-btn");
            alert("按钮已被禁用");
        }
    </script>
</body>
</html>

功能说明

  1. 点击按钮后立即将其禁用

  2. 防止用户多次点击提交

  3. 常用于表单提交场景

CSS扩展

可以添加样式增强禁用状态的视觉效果：

button:disabled {
    background-color: #cccccc;
    color: #666666;
    border: 1px solid #999999;
}

button:disabled:hover {
    background-color: #cccccc;
    cursor: not-allowed;
}

替代方案

也可以使用jQuery实现：

$("#myButton").prop("disabled", true);
TAG：按钮实例用户详细现在属性主要标签定义形式

声明：本站所有文章资源内容，如无特殊说明或标注，均为采集网络资源。如若本站内容侵犯了原著者的合法权益，可联系本站删除。