禁用文本选择 html (1)

📌 相关文章

📜 禁用文本选择 html (1)

📅 最后修改于: 2023-12-03 15:11:25.013000 🧑 作者: Mango

禁用文本选择 HTML

在开发Web应用程序时，有时需要禁止用户选择和复制网页上的文本。这可以通过设置CSS和JavaScript来完成。

1. 使用 CSS 防止文本选择

您可以使用CSS来防止用户选择网页上的文本。将以下CSS样式添加到您的 CSS 文件中：

body {
    user-select: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
}

或者，可以将其应用于特定元素：

.disable-select {
    user-select: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
}

然后将CSS类“disable-select”添加到要禁止选择的元素上。

2. 使用 JavaScript 防止文本选择

您可以使用JavaScript来防止文本选择。将以下JavaScript代码添加到页面的标签中：

<head>
    <script>
        function disableSelection(element) {
            element.onselectstart = function() {
                return false;
            };

            element.unselectable = "on";
            element.style.userSelect = "none";
            element.style.MozUserSelect = "none";
            element.style.webkitUserSelect = "none";
        }

        disableSelection(document.body);
    </script>
</head>

此代码将禁用整个页面上的文本选择。如果您想禁用单个元素上的选择，请将该元素传递给“ disableSelection”函数。

总结

无论您使用CSS还是JavaScript来禁止文本选择，都可以有效保护您的网站内容免受不必要的复制。但请注意，这并不一定可以完全防止盗用。禁止选择也不应影响辅助功能，如屏幕阅读器。