CSS禁止用户选择|极客教程

CSS禁止用户选择

在网页开发中，有时候我们希望禁止用户选择页面上的文本内容，这样可以防止用户复制我们的内容或者干扰页面的布局。在CSS中，我们可以通过一些属性来实现禁止用户选择文本的效果。本文将详细介绍如何使用CSS来禁止用户选择文本。

1. 使用user-select属性

user-select属性可以控制用户是否可以选择文本。该属性有以下几个取值：

none：用户不能选择文本。
auto：用户可以选择文本。
text：用户只能选择文本内容，不能选择其他元素。

示例代码1：禁止用户选择文本

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>禁止用户选择文本</title>
<style>
    .no-select {
        user-select: none;
    }
</style>
</head>
<body>
    <div class="no-select">这是一个禁止选择的文本。</div>
</body>
</html>

Output:

CSS禁止用户选择

在上面的示例中，我们给div元素添加了一个类名为no-select，并设置了user-select: none;，这样用户就无法选择div中的文本内容。

运行结果1：

用户无法选择div中的文本内容。

2. 使用selectable属性

除了user-select属性外，还可以使用selectable属性来控制元素是否可以被选择。

示例代码2：禁止用户选择元素

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>禁止用户选择元素</title>
<style>
    .no-selectable {
        -webkit-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
        user-select: none;
    }
</style>
</head>
<body>
    <div class="no-selectable">这是一个禁止选择的元素。</div>
</body>
</html>

Output:

CSS禁止用户选择

在上面的示例中，我们使用了-webkit-user-select: none;、-moz-user-select: none;、-ms-user-select: none;和user-select: none;来禁止用户选择div元素。

运行结果2：

用户无法选择div元素。

3. 使用JavaScript禁止选择文本

除了CSS属性外，还可以使用JavaScript来禁止用户选择文本。通过监听selectstart事件并阻止默认行为，可以实现禁止选择文本的效果。

示例代码3：使用JavaScript禁止选择文本

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>使用JavaScript禁止选择文本</title>
<script>
    document.addEventListener('selectstart', function(e) {
        e.preventDefault();
    });
</script>
</head>
<body>
    <div>这是一个禁止选择的文本。</div>
</body>
</html>

Output:

CSS禁止用户选择

在上面的示例中，我们通过JavaScript监听selectstart事件，并在事件触发时调用e.preventDefault()来阻止默认行为，从而禁止用户选择文本。

运行结果3：

用户无法选择页面上的文本。

4. 使用CSS伪类禁止选择文本

除了上述方法外，还可以使用CSS伪类来禁止选择文本。通过::selection伪类和-moz-selection伪类，可以实现禁止用户选择文本的效果。

示例代码4：使用CSS伪类禁止选择文本

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>使用CSS伪类禁止选择文本</title>
<style>
    ::selection {
        background: transparent;
    }
    ::-moz-selection {
        background: transparent;
    }
</style>
</head>
<body>
    <div>这是一个禁止选择的文本。</div>
</body>
</html>

Output:

CSS禁止用户选择

在上面的示例中，我们使用::selection伪类和-moz-selection伪类，将选中文本的背景色设置为透明，从而禁止用户选择文本。

运行结果4：

用户无法选择页面上的文本。

5. 使用JavaScript禁止右键菜单

除了禁止选择文本外，有时候我们还希望禁止用户右键菜单的弹出。通过监听contextmenu事件并阻止默认行为，可以实现禁止右键菜单的效果。

示例代码5：使用JavaScript禁止右键菜单

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>使用JavaScript禁止右键菜单</title>
<script>
    document.addEventListener('contextmenu', function(e) {
        e.preventDefault();
    });
</script>
</head>
<body>
    <div>右键点击试试看。</div>
</body>
</html>

Output:

CSS禁止用户选择

在上面的示例中，我们通过JavaScript监听contextmenu事件，并在事件触发时调用e.preventDefault()来阻止默认行为，从而禁止用户右键菜单的弹出。

运行结果5：

用户无法弹出右键菜单。

6. 使用CSS禁止拖拽

有时候我们还希望禁止用户拖拽页面上的元素。通过设置draggable属性为false，可以实现禁止拖拽的效果。

示例代码6：使用CSS禁止拖拽

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>使用CSS禁止拖拽</title>
<style>
    .no-drag {
        -webkit-user-drag: none;
        user-drag: none;
    }
</style>
</head>
<body>
    <img src="https://www.geek-docs.com/image.jpg" class="no-drag" alt="禁止拖拽的图片">
</body>
</html>

Output:

CSS禁止用户选择

在上面的示例中，我们给img元素添加了一个类名为no-drag，并设置了-webkit-user-drag: none;和user-drag: none;，这样用户就无法拖拽图片。

运行结果6：

用户无法拖拽图片。

7. 使用CSS禁止复制

除了禁止选择文本外，有时候我们还希望禁止用户复制页面上的内容。通过设置-webkit-touch-callout属性为none，可以实现禁止复制的效果。

示例代码7：使用CSS禁止复制

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>使用CSS禁止复制</title>
<style>
    .no-copy {
        -webkit-touch-callout: none;
    }
</style>
</head>
<body>
    <div class="no-copy">这是一个禁止复制的文本。</div>
</body>
</html>

Output:

CSS禁止用户选择

在上面的示例中，我们给div元素添加了一个类名为no-copy，并设置了-webkit-touch-callout: none;，这样用户就无法复制div中的文本内容。

运行结果7：

用户无法复制div中的文本内容。

8. 使用CSS禁止拖拽链接

有时候我们还希望禁止用户拖拽链接，防止链接被意外拖拽到其他位置。通过设置draggable属性为false，可以实现禁止拖拽链接的效果。

示例代码8：使用CSS禁止拖拽链接

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>使用CSS禁止拖拽链接</title>
<style>
    a.no-drag {
        -webkit-user-drag: none;
        user-drag: none;
    }
</style>
</head>
<body>
    <a href="https://www.geek-docs.com" class="no-drag">禁止拖拽的链接</a>
</body>
</html>

Output:

CSS禁止用户选择

在上面的示例中，我们给a元素添加了一个类名为no-drag，并设置了-webkit-user-drag: none;和user-drag: none;，这样用户就无法拖拽链接。

运行结果8：

用户无法拖拽链接。

9. 使用CSS禁止拖拽图片

除了禁止拖拽链接外，有时候我们还希望禁止用户拖拽图片。通过设置draggable属性为false，可以实现禁止拖拽图片的效果。

示例代码9：使用CSS禁止拖拽图片

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>使用CSS禁止拖拽图片</title>
<style>
    img.no-drag {
        -webkit-user-drag: none;
        user-drag: none;
    }
</style>
</head>
<body>
    <img src="https://www.geek-docs.com/image.jpg" class="no-drag" alt="禁止拖拽的图片">
</body>
</html>

Output:

CSS禁止用户选择

在上面的示例中，我们给img元素添加了一个类名为no-drag，并设置了-webkit-user-drag: none;和user-drag: none;，这样用户就无法拖拽图片。

运行结果9：

用户无法拖拽图片。

10. 使用CSS禁止拖拽文本

除了禁止拖拽图片外，有时候我们还希望禁止用户拖拽文本。通过设置draggable属性为false，可以实现禁止拖拽文本的效果。

示例代码10：使用CSS禁止拖拽文本

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>使用CSS禁止拖拽文本</title>
<style>
    p.no-drag {
        -webkit-user-drag: none;
        user-drag: none;
    }
</style>
</head>
<body>
    <p class="no-drag">这是一个禁止拖拽的文本。</p>
</body>
</html>

Output:

CSS禁止用户选择