最近在做移動端的需求時,有一個長按的需求,總是會觸發移動端瀏覽器自帶的長按效果,而且文字也會被選中,所以需要修改為文字不能被選中,瀏覽器默認長按效果禁止掉。
*{ -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;/*用戶是否能夠選中文本*/ } 作者:天涯的海風 鏈接:https://www.jianshu.com/p/dd7d77c9a921(就是頂部鏈接) 來源:簡書 著作權歸作者所有。商業轉載請聯系作者獲得授權,非商業轉載請注明出處。
以上是禁止選中文本,增加上述css后會出現一下問題:
1.據說ios的input框會無法聚焦(沒有試驗過),解決如下:
input {
-webkit-user-select: auto;
}
2.據說安卓的微信瀏覽器不起作用(安卓的微信瀏覽器起不起作用我不清楚,但是安卓華為的自帶瀏覽器確定是不起作用的),解決如下:
document.oncontextmenu=function(e){
e.preventDefault();
};
將系統的默認長按菜單事件禁止掉