美文网首页
H5移动端页面禁用长按选中文本

H5移动端页面禁用长按选中文本

作者: 别来无恙_ly | 来源:发表于2021-04-14 10:52 被阅读0次

    禁用长按可选中文本

    /* 已测有效 */
    * {
        -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;/*用户是否能够选中文本*/
    }
    

    此段css样式加入后能解决ios下手机浏览器,微信浏览器长按出现选择系统菜单问题,但是对于Android下微信浏览器还会出现不兼容问题。

    禁止长按弹出系统菜单

    // 待测试
    //oncontextmenu 事件在元素中用户右击鼠标时触发并打开上下文菜单,此处用于阻止菜单的出现。
    
    //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:禁止长按弹出");
    }
    

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

    <!-- 待测试 -->
    <!-- 安卓UC浏览器 禁用长按 右键菜单 -->
    <meta name="browsermode" content="application"/>
    

    相关文章

      网友评论

          本文标题:H5移动端页面禁用长按选中文本

          本文链接:https://www.haomeiwen.com/subject/ntsklltx.html