禁止页面元素选中

一. CSS之user-select属性

  • 建议使用
DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style>
        body {
            /* 兼容Safari */
            -webkit-user-select: none; 
            /* 兼容IE 10+ 和 Edge */
            -ms-user-select: none;
            /* 
                ⏹禁止用户选中的标准语法
            */
            user-select: none; 
        }
    style>
    <title>Documenttitle>
head>
<body>
    <div>
        如何恢复mysql数据库 的数据库 我关机没关springboot服务 
        导致把数据库删了,昨天关机导致的 db_guahao这个数据库
    div>
body>
html>

二. JS之事件返回值为false

  • 可以使用
DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Documenttitle>
head>
<body>
    <div style="display: flex;align-items: center;flex-direction: column;">
        <div>121212div>
        <div>343434div>
    div>
body>
<script>
// ⏹禁止复制和选中操作
document.body.onselectstart = document.body.ondrag = function(){return false;}
script>
html>

三. HTML设置属性

  • 不建议使用,双击带选择段落 + Ctrl + C依然可以实现选择
DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Documenttitle>
head>

<body >

    
    <div oncontextmenu="return false">
        我被添加了oncontextmenu元素,无法选中右键复制
    div>
    <hr>
    <div>我没有添加oncontextmenu属性,可以复制div>
body>
html>

你可能感兴趣的:(#,JS,前端,html,前端)