h5页面禁止复制_H5移动端页面禁止复制技巧

前言：业务需要，需要对整个页面禁止弹出复制菜单。

在禁止的页面中加入以下css样式定义

* {

-webkit-touch-callout:none;/*系统默认菜单被禁用*/

-webkit-user-select:none;/*webkit浏览器*/

-khtml-user-select:none;/*早起浏览器*/

-moz-user-select:none;/*火狐浏览器*/

-ms-user-select:none;/*IE浏览器*/

user-select:none;/*用户是否能够选中文本*/

}

还需加入以下JS

//PC端 使右键和复制失效

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

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

//ios

document.oncontextmenu = function (e) {

e.preventDefault();

};

document.onselectstart = function (e) {

e.preventDefault();

};

//安卓

document.addEventListener('contextmenu', function (e) {

e.preventDefault();

});

document.ontouchend = function () {

throw new Error("NO ERRPR:禁止长按弹出");

}

实测 IOS禁止呼出复制菜单有效。但在安卓上还无法全部禁止。

安卓UC浏览器上还需加入以下代码,可以禁止长按呼出菜单:

安卓QQ浏览器暂时没有找到禁止呼出复制菜单的方法.