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

<script language="Javascript">
    //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:禁止长按弹出");
    }
</script>

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

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

<meta name="browsermode" content="application"/>

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