为了禁用页面内容选中和复制操作,我们可以采取以下两种方法:
为了禁用页面内容选中和复制操作,我们可以采取以下两种方法:
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禁用页面内容选中和复制操作
- 详解android 中文字体向上偏移解决方案 2023-12-14
- JS、jQuery中select的用法详解 2023-12-25
- 关于 ios:Sencha – 禁用 Sencha 事件 2022-09-15
- JavaScript新窗口与子窗口传值详解 2023-12-01
- Ajax实现省市县三级联动 2023-02-23
- Ajax 跨域如何实现 2022-12-28
- 关于Ajax中通过response在后台传递数据问题 2023-02-14
- 【手写笔记】服务器上配置环境+nginx启动+配置安全组+测试html+wget+爬虫+上传文件scp+rsync+网页+更改域名+看自己的ip+爬虫项目+asca+shell编程+ 2023-10-25
- 解决:layUI数据表格+简单查询 2022-12-13
- jQuery实现的自定义轮播图功能详解 2024-01-02