UC瀏覽器-H5頁面禁止網頁復制粘貼

前言

最近接了個需求，禁止網頁中的內容被復制粘貼，解決方案網上都有，主要方法是 添加CSS以及修改元素的原生事件
css代碼

#eleselector{
    /*禁止文本被選中*/
   -moz-pointer-events:none;
   -webkit-touch-callout:none;
   -webkit-user-select:none;
   -khtml-user-select:none;
   -moz-user-select:none;
   -ms-user-select:none;
   user-select:none;
   /*禁止移動端圖片長按觸發操作系統菜單保存文件*/
   pointer-events:none;
   -webkit-pointer-events:none;
    -ms-pointer-events:none;
   -moz-pointer-events:none;
}

#eleselector button{
   /*禁止長按的元素子元素會出現不能點擊的情況，需要對子元素做出以下調整*/
   pointer-events:auto;
   -webkit-pointer-events:auto;
    -ms-pointer-events:auto;
   -moz-pointer-events:auto;
}

html代碼

 <!--代碼比較好懂，禁止該元素的右鍵菜單以及拖動事件-->
 <div ondragstart="return false" oncontextmenu="return false"   onselectstart ="return false"  onselect="document.selection.empty()"  oncopy="document.selection.empty()"  onbeforecopy="return false"  onmouseup="document.selection.empty()">
</div>

寫到這里，沒有什么難度，以上代碼 可以在 微信內置瀏覽器以及 桌面版Chorem、桌面版QQ瀏覽器 等大部分主流瀏覽器中實現禁止選中以及復制的功能。

但是，在UC瀏覽器中翻車了...

UC瀏覽器中長按網頁會出現瀏覽器自帶的菜單，並且更坑的是點擊自帶菜單的【復制】不會觸發選中元素的copy事件（大膽假設從觸發長按事件到復制整個流程走的安卓的操作系統，已經不是網頁可以控制的了） - -

最后找到了解決方案 ,只需加上一行meta標簽，即可禁止UC瀏覽器彈出菜單，選中並復制內容，直接上代碼

正文

   <meta name="browsermode" content="application"/><!-- uc不能復制網頁內容 需要復制去掉即可-->

原文鏈接： https://www.jianshu.com/p/96aa4e28dd4b

續

華為瀏覽器（花瓣瀏覽器） 仍然可以彈出菜單，並且可以復制選中的文本，好在可以監聽到元素的copy事件，可以用JS處理復制的內容

    /*清空要復制的內容*/
    document.body.onbeforecopy = function () {
        window.getSelection().removeAllRanges();
    }
    document.body.oncopy = function () {
        window.getSelection().removeAllRanges();
        return false;
    }