移动端禁用长按选中文本功能:
* {
-webkit-touch-callout:none;
-webkit-user-select:none;
-khtml-user-select:none;
-moz-user-select:none;
-ms-user-select:none;
user-select:none;
}
-webkit-touch-callout
不是一个标准的属性,尽量不要在生产环境中使用。callout
是指当触摸并按住一个元素的时候出现的提示。
当在 IOS 上一直按住一个目标元素时,Safari 会展示一个关于这个链接的 callout
信息。-webkit-touch-callout
属性允许禁用掉这一行为。
兼容性:
iOS 2.0及更高版本的Safari浏览器可用 Android尚不明确
那么在 Android 上应该如何实现该属性相似的功能呢?代码如下:
window.oncontextmenu = function(e) {
e.preventDefault();
e.stopPropagation();
return false;
};
js实现禁用复制粘贴
document.body.onselectstart = document.body.oncontextmenu = function(){
return false;
}
注意: 这段代码必须放在 body
元素后面,放在前面或者放在 head
里面都不起作用。
其他:
document.body.onselectstart
选中功能
document.body.oncontextmenu
右键菜单
document.body.ondragstart
页面内容拖拽功能,拖拽是可以实现复制的。禁止复制时需要将其禁用。
document.body.oncopy
页面内容复制功能,当禁用时,即使你点击了复制或使用了快捷键但是你剪切板中的内容不是你刚复制的内容而是你以前放在剪切板中的内容或为空。
document.body.onpaste
页面内容粘贴功能,若没有先进行复制操作,则粘贴内容为空。
document.body.oncut
页面内容剪切功能,禁用和效果和禁用复制功能类似。
注意:当使用了上述禁用功能后,如果页面的某个角落还可以右键或复制,那是因为你的 body
没有覆盖整个页面,可以在body上添加如下属性:
leftMargin=0 topMargin=0 style=”width: 100%;height: 100%;”
禁用网页右键菜单,但是仍然可以使用快捷键复制。
js实现修改粘贴的内容
通过 window.event.clipboardData.getData('text')
获取剪切板的内容。
document.addEventListener("paste", function(e) {
event.preventDefault();
var clipboarddata = window.event.clipboardData.getData('text'),
pasteContent = "<div style='font-size:16px;'><p>链接:" + window.location.href + "</p><p>来源:小彬的个人博客</p><pre>" + clipboarddata + "</pre></div>";
document.getElementById("showCopyContent").innerHTML = pasteContent;
});