大只彬

个人博客

欢迎来到我的个人博客~( ̄▽ ̄~)(~ ̄▽ ̄)~


禁用复制与粘贴


移动端禁用长按选中文本功能:

* {
    -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;
});

打赏一个呗

取消

感谢您的支持,我会继续努力的!

扫码支持
扫码支持
扫码打赏,你说多少就多少

打开支付宝扫一扫,即可进行扫码打赏哦