为了禁用页面内容选中和复制操作,我们可以采取以下两种方法:
为了禁用页面内容选中和复制操作,我们可以采取以下两种方法:
1. 通过CSS的user-select属性来禁用选中操作
CSS的user-select
属性可以控制用户是否可以选中页面中的文本,通过将其属性值设置为none
可以禁用选中操作,代码如下:
* {
-webkit-user-select: none; /*webkit浏览器*/
-moz-user-select: none; /*Firefox浏览器*/
-ms-user-select: none; /*IE浏览器*/
user-select: none;
}
上述代码中的*
代表着选择器适用于页面中的所有元素,-webkit-user-select
、-moz-user-select
、-ms-user-select
都是用于不同浏览器内核的私有属性,user-select
是CSS3的标准属性。通过四个属性的设置,能够确保兼容性。
2. 通过JavaScript禁用鼠标右键操作和粘贴快捷键操作
我们可以通过JavaScript来禁用鼠标右键和粘贴快捷键操作,代码如下:
// 禁用鼠标右键
document.oncontextmenu = function (ev) {
ev.preventDefault();
};
// 禁用粘贴快捷键操作
document.onkeydown = function (ev) {
if (ev.ctrlKey && (ev.keyCode == 67 || ev.keyCode == 86 || ev.keyCode == 65)) {
ev.preventDefault();
}
};
上述代码中的oncontextmenu
事件用于禁用鼠标右键的菜单,preventDefault
方法用于取消默认事件。onkeydown
事件用于禁用复制、粘贴和全选快捷键操作,ctrlKey
代表Ctrl键处于按下状态,keyCode
代表触发的键码。当用户同时按下Ctrl键并按下C、V、A键时,利用preventDefault
方法阻止默认的操作。
通过上述两种方法,我们可以灵活配置禁用页面内容选中和复制操作的需求。
沃梦达教程
本文标题为:通过CSS禁用页面内容选中和复制操作
基础教程推荐
猜你喜欢
- CSS linear-gradient属性案例详解 2022-11-20
- Vue vue.config.js 的详解与配置 2023-10-08
- JavaScript实现三种常用网页特效(offset、client、scroll系列) 2023-08-12
- Ajax 传递JSON实例代码 2023-01-31
- AJAX请求是否真的不安全?谈一谈Web安全与AJAX的关系 2023-02-15
- JavaScript设计模式之职责链模式详解 2022-10-22
- 通用javascript代码判断版本号是否在版本范围之间 2024-01-04
- vue引入html2canvas插件实现图片嵌入div展示下载 2023-10-08
- JS判断当前页面是否在微信浏览器打开的方法 2024-01-03
- Spring Boot + Vue3 前后端分离 实战wiki知识库系统 2023-10-08