页面禁止选中需求

原创于 2024-04-25 09:18:24 发布 · 382 阅读

3 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #前端 #html

日常需求专栏收录该内容

1 篇文章

订阅专栏

本文详细介绍了如何在HTML中使用JavaScript通过各种事件如oncopy,ondragstart,onselectstart等来防止用户选中文本并复制，包括body标签内的代码示例。

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