如何禁止页面或者文本被选中?

妍华之喜

已于 2022-04-27 17:11:17 修改

阅读量3.7k

点赞数 5

文章标签： javascript js

于 2020-12-28 17:25:29 首次发布

本文链接：https://blog.youkuaiyun.com/XVJINHUA954/article/details/111871006

版权

如何禁止页面或者文本被选中?

禁止整个body中的内容被选中复制：

<body onselectstart="return false">
    <p>禁止整个body中的内容被选中复制</p>
</body>

禁止页面中某一块或某一篇文章被选中复制：

<body>
    <div onselectstart="return false">
        这段内容不可选，禁止文字被选中
        <p>禁止页面中某一块或某一篇文章被选中复制</p>
    </div>
</body>

再狠点,直接在body标签中写入如下代码,实现HTML中禁止文字的复制和选中.

<body oncontextmenu='return false' ondragstart='return false' onselectstart='return false'
    onselect='document.selection.empty()' oncopy='document.selection.empty()' onbeforecopy='return false'
    onmouseup='document.selection.empty()'>
    <div>
        HTML中禁止文字的复制和选中
        <p>HTML中禁止文字的复制和选中</p>
    </div>
</body>

`<body>`中的各个事件

oncontextmenu='return false'取消鼠标右键
ondragstart='return false'禁止鼠标在网页上拖动
onselectstart='return false' 禁止选中网页上的内容
onselect='document.selection.empty()'
- onselect事件会在文本框中的文本被选中时发生
- οnselect=“SomeJavaScriptCode”必需规定该事件发生时执行的 JavaScript
- document.selection.empty()表示文本框被选中时为空
oncopy='return false'防复制用户在网页上选中的内容
onbeforecopy='return false'onbeforecopy():默认动作的事件源对象上被取消
onmouseup='document.selection.empty()'
- onmouseup事件会在鼠标按键被松开时发生
- οnmοuseup=“SomeJavaScriptCode”同onselect一样，必需规定该事件发生时执行的 JavaScript
- document.selection.empty()表示文本框被选中时为空

原生JS实现一张图片替换光标功能

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>实现一张图片替换光标功能</title>
    <style>
        .div {
            width: 600px;
            height: 600px;
            border: 1px solid red;

        }
    </style>
</head>

<body>
    <div class="div"></div>
    <script>
        window.onload = function () {
            var d = document.querySelector(".div")
            d.onmousemove = function () {
                this.style.cursor = 'url(1.ico),auto';
            }
        }
    </script>
</body>

</html>