11月10日
网站LOGO 六月是只猫 - 互联网技术分享指南
生活,一半家长里短,一半山川湖海...
菜单
  • 热评
    用户的头像
    首次访问
    上次留言
    累计留言
    我的等级
    我的角色
    打赏二维码
    打赏博主
    网站添加复制提醒和右键菜单提醒
    点击复制本页信息
    微信扫一扫
    文章二维码
    文章图片 文章标题
    创建时间
  • 一 言
    确认删除此评论么? 确认
  • 本弹窗介绍内容来自,本网站不对其中内容负责。
    www.lyszm.com

    网站添加复制提醒和右键菜单提醒

    六月是只猫 · 原创 ·
    日常技术分享互联网 · 实用教程代码WordPressjavascript
    共 3216 字 · 约 2 分钟 · 2986
    本文最后更新于2024年05月02日,已经过了192天没有更新,若内容或图片失效,请留言反馈

    前言

    在网站设计中,弹窗的使用常常是为了提醒用户或执行某种功能。而我在探索过程中发现,虽然常见的弹窗功能有“复制提醒”、“禁用F12”以及“禁用鼠标右键”,但很少见到如此全面且美观的设计。今天,我特意为大家分享这款独特设计的弹窗,不仅涵盖了常见的“禁用Ctrl+U”、“禁用Ctrl+S”、“禁用Ctrl+Shift+I”等功能,更在视觉上带来了令人眼前一亮的体验。

    这款弹窗的设计理念是将用户体验与网站安全完美融合。在保留基本的复制提醒和禁用F12、鼠标右键功能的同时,还增加了对多个常用快捷键的禁用,大大增强了网站的安全性。

    此外,这款弹窗在视觉上也有着独特之处。其设计风格简洁大方,颜色搭配得当,给人一种清新脱俗的感觉。同时,弹窗的出现时机和方式也经过精心设计,既不会打扰到用户的正常浏览,又能在关键时刻起到提醒作用。

    为了方便大家使用这款弹窗设计,我已将所需的代码打包在本文下方。需要注意的是,这款弹窗完美适配子比主题,其他主题的用户可能需要自行调整以适应自己的网站风格。

    效果图

    1.复制Ctrl+C提醒


    2.禁用鼠标右键菜单提醒

    3.禁用F12按键提醒(开发者工具快捷键)

    4.禁用Ctrl+Shift+I(开发者工具快捷键)

    5.禁用Ctrl+S(保存网页/文件)

    6.禁用Ctrl+U(查看网页源代码)

    操作教程

    1.先引入CDN资源

    js 代码:
    <!-- 引入VUE -->
    <script src="https://unpkg.com/vue@2.6.14/dist/vue.min.js"></script>
    <!-- 引入样式 -->
    <script src="https://unpkg.com/element-ui@2.15.6/lib/index.js"></script>
    <!-- 引入组件库 -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui@2.15.6/packages/theme-chalk/lib/index.css">

    2.在任意引用全局js的文件内添加:

    1、复制提醒

    JavaScript 代码:
    /* 复制提醒 */
    document.addEventListener("copy",function(e){
        new Vue({
            data:function(){
                this.$notify({
                    title:"嘿!复制成功",
                    message:"若要转载请务必保留原文链接!爱你呦~",
                    position: 'bottom-right',
                    offset: 50,
                    showClose: false,
                    type:"success"
                });
                return{visible:false}
            }
        })
    })

    2、禁用右键菜单并提醒

    JavaScript 代码:
    /* 禁用右键菜单并提醒 */
    document.oncontextmenu = function () {
    new Vue({
        data:function(){
            this.$notify({
                title:"嘿!没有右键菜单",
                message:"复制请用键盘快捷键",
                position: 'bottom-right',
                offset: 50,
                showClose: false,
                type:"warning"
            });
            return{visible:false}
        }
    })
    return false;
    }

    3、禁用F12按键并提醒

    JavaScript 代码:
    /* 禁用F12按键并提醒 */
    document.onkeydown = function () {
    if (window.event && window.event.keyCode == 123) {
      event.keyCode = 0;
      event.returnValue = false;
        new Vue({
                data:function(){
                    this.$notify({
                        title:"嘿!别瞎按",
                        message:"坏孩子!",
                        position: 'bottom-right',
                        offset: 50,
                        showClose: false,
                        type:"error"
                    });
                    return{visible:false}
                }
            })
      return false;
    }
    };

    其他扩展

    禁用左键选择

    JavaScript 代码:
    //禁用复制
          document.oncopy = function () {
            return false;
         }

    禁用Ctrl+Shift+I

    JavaScript 代码:
    //禁用Ctrl+Shift+I
            if ((event.ctrlKey) && (event.shiftKey) && (event.keyCode == 73)) {
              return false;
            }
    声明:本文由 六月是只猫(博主)原创,依据 CC-BY-NC-SA 4.0 许可协议 授权,转载请注明出处。

    还没有人喜爱这篇文章呢

    现在已有

    3

    条评论
    发一条!
    1. 头像
      beimo
      • 等级:Lv.2
      • 角色:访客
      • 在线:很久之前

      博主,求其他禁用代码

      · · · 广西-南宁
    2. 头像
      刘郎
      • 等级:Lv.2
      • 角色:访客
      • 在线:很久之前

      好东西,我要拿走了😂

      · · · 海外
    3. 头像
      肖寒武
      • 等级:Lv.2
      • 角色:志同道合 · 好友
      • 在线:三月内

      技术博主

      · · · 浙江-杭州
    博客logo 六月是只猫 - 互联网技术分享指南 生活,一半家长里短,一半山川湖海... 51统计 百度统计
    MOEICP 萌ICP备20248888号 反诈联盟 公益反诈联盟成员单位 ICP 京ICP备2022028403号-1 ICP 京公网安备 11010502051304号 又拍云 本站由又拍云提供CDN加速/云存储服务

    🕛

    本站已安全运行 1 年 365 天 0 小时 45 分
    六月是只猫 - 互联网技术分享指南. © 2022 ~ 2024.
    网站logo

    六月是只猫 - 互联网技术分享指南 生活,一半家长里短,一半山川湖海...
     
     
     
     
    壁纸
     
     
     
     

    3

    1

  • 下一篇