【js】鼠标禁止右键禁止打开控制台及键盘禁用

简介: 前言大家好,今天和大家分享一下在前端js中禁止鼠标在浏览器中右键,禁止鼠标选中和禁止键盘按键。这个方法是我在制作一个单词考核系统时所使用到的,因为在考试期间如果打开控制台,通过控制台找到了正确的答案,那么就没有意义了。所以就需要将控制台禁用,所应用到的也是一些基础的知识,下面我们就一起来看一看吧

前言

大家好,今天和大家分享一下在前端js中禁止鼠标在浏览器中右键,禁止鼠标选中和禁止键盘按键。

这个方法是我在制作一个单词考核系统时所使用到的,因为在考试期间如果打开控制台,通过控制台找到了正确的答案,那么就没有意义了。

所以就需要将控制台禁用,所应用到的也是一些基础的知识,下面我们就一起来看一看吧

一、禁用

1. 禁用鼠标右键

document.oncontextmenu = new Function("event.returnValue=false");

oncontextmenu是JavaScript中的一个事件属性,用于在用户右击鼠标时触发相应的事件处理程序。当用户右击鼠标时,浏览器会显示一个上下文菜单,该属性可以用于阻止默认的上下文菜单行为,或者自定义右键菜单的行为。

2. 禁用鼠标选中

document.onselectstart = new Function("event.returnValue=false");

onselectstart是一个事件处理程序属性,它在用户开始选择文本时触发。它可以用于防止用户选择文本或在拖动元素时选择文本。

3. 禁用键盘F12

 document.addEventListener("keydown", function (e) {
    console.log(e。key);
        if (e.key == "F12") {
          e.preventDefault(); // 如果按下键F12,阻止事件
        }
    });

除了上面的写法外还有其他的一些写法。

document.onkeydown = () => {
  console.log(window.event.keyCode);
  for (let i = 9; i < 47; i++) {
    if (window.event && window.event.keyCode == i) {
      return false;
    }
  }
  for (let i = 58; i < 65; i++) {
    if (window.event && window.event.keyCode == i) {
      return false;
    }
  }
  for (let i = 91; i < 300; i++) {
    if (window.event && window.event.keyCode == i) {
      return false;
    }
  }
  // 禁用ctrl+shift+i
  if (window.event.ctrlKey && window.event.shiftKey && window.event.keyCode == 73) {
    return false;
  }
  if (window.event.shiftKey) {
    return false;
  }
  // 禁用ctrl+r
  if (window.event.ctrlKey && window.event.keyCode == 82) {
    return false;
  }
}

onkeydown是JavaScript中的事件处理程序,它在用户按下键盘上的任何键时触发。可以将onkeydown事件与JavaScript函数一起使用,以便在用户按下键时执行某些操作。例如,可以使用onkeydown事件来捕获用户按下Enter键并提交表单。


可以根据自己的需要来禁用按键,这个是我的项目需要所以加了禁用其它的键盘按键,上面的这个ctrl+shift+i也是可以打开浏览器的。

二、所有代码

// 1.禁用右键菜单
document.oncontextmenu = new Function("event.returnValue=false");
// 2.禁用鼠标选中
document.onselectstart = new Function("event.returnValue=false");
document.onkeydown = () => {
  console.log(window.event.keyCode);
  for (let i = 9; i < 47; i++) {
    if (window.event && window.event.keyCode == i) {
      return false;
    }
  }
  for (let i = 58; i < 65; i++) {
    if (window.event && window.event.keyCode == i) {
      return false;
    }
  }
  for (let i = 91; i < 300; i++) {
    if (window.event && window.event.keyCode == i) {
      return false;
    }
  }
  // 禁用ctrl+shift+i
  if (window.event.ctrlKey && window.event.shiftKey && window.event.keyCode == 73) {
    return false;
  }
  if (window.event.shiftKey) {
    return false;
  }
  // 禁用ctrl+r
  if (window.event.ctrlKey && window.event.keyCode == 82) {
    return false;
  }
}

总结

最后偷偷的告诉大家,还有一个可以打开控制台的方法,哪就是在刷新浏览器页面时同时按下F12,这样也是可以打开的,所以在这个项目中我对刷新也做了一些操作。

这个打开控制台的方法大家可以试一下,但是要先把F12给禁止了,不然搞错了还不知道,这个方法不是特别容易打开,要多尝试几次。

以上就是本章的全部内容了,感谢您的阅读,希望能够帮助到您。


相关文章
|
2月前
|
Web App开发 JavaScript 前端开发
使用 JS 实现在浏览器控制台打印图片 console.image()
在前端开发过程中,调试的时候,我们会使用 console.log 等方式查看数据。但对于图片来说,仅靠展示的数据与结构,是无法想象出图片最终呈现的样子的。 虽然我们可以把图片数据通过 img 标签展示到页面上,或将图片下载下来进行预览。但这样的调试过程实在是复杂,何不实现一个 console.image() 呢?
58 1
使用 JS 实现在浏览器控制台打印图片 console.image()
|
1月前
|
JavaScript
vue 全局响应键盘按键/监听键盘事件(含 js 获取键盘keyCode值的方法)
vue 全局响应键盘按键/监听键盘事件(含 js 获取键盘keyCode值的方法)
46 2
|
2月前
|
JavaScript 前端开发
杨老师课堂之JavaScript悬浮事件(鼠标移入移出事件)
杨老师课堂之JavaScript悬浮事件(鼠标移入移出事件)
27 1
|
1月前
|
JavaScript
JS字符串数据类型转换,字符串如何转成变量,+号只要有一个是字符串,就会把另外一个转成字符串,- * / 都会把数据转成数字类型,数字型控制台是蓝色,字符型控制台是黑色,
JS字符串数据类型转换,字符串如何转成变量,+号只要有一个是字符串,就会把另外一个转成字符串,- * / 都会把数据转成数字类型,数字型控制台是蓝色,字符型控制台是黑色,
|
1月前
|
JavaScript
js 滚动鼠标滑轮放大缩小图片
js 滚动鼠标滑轮放大缩小图片
15 0
|
1月前
|
Web App开发 JavaScript 前端开发
js 调试—— 【控制台】debugger语句 、 命令行API
js 调试—— 【控制台】debugger语句 、 命令行API
49 0
|
1月前
|
JavaScript 前端开发 测试技术
js 控制台调试——console 对象【详解】
js 控制台调试——console 对象【详解】
24 0
|
2月前
|
JavaScript
一篇文章讲明白js鼠标侧键监听(也有左键,中键和右键)
一篇文章讲明白js鼠标侧键监听(也有左键,中键和右键)
116 0
|
2月前
|
JavaScript 前端开发 算法
[练习]用Js获取html页面中表单提交的数据并且返回到控制台
[练习]用Js获取html页面中表单提交的数据并且返回到控制台
23 0
|
3月前
|
Java
java实战项目超市管理系统控制台版
java实战项目超市管理系统控制台版

热门文章

最新文章