记录有关H5在页面按下会选择文字解决方案

记录有关H5在页面按下会选择文字解决方案

1.要求网站M站的页面在手机浏览器打开时翻页滚动时总会选中中文字提示复制，用户体验不好，故而要求前端实现下按不会弹出选择复制的情况

解决步骤如下
1、css

• {
  -webkit-touch-callout:none;
  -webkit-user-select:none;
  -khtml-user-select:none;
  -moz-user-select:none;
  -ms-user-select:none;
  user-select:none;
  }
  input {
  -webkit-user-select:auto; /webkit浏览器此兼容ios input框无法输入问题 由于加入上方css造成的影响/
  }
  textarea {
  -webkit-user-select:auto; /webkit浏览器/
  }

以上经过测试仅使微信、 钉钉、以及ios系统打开的页面不会选择文字，浏览器还是会出现选择文字情况
2、加入js兼容安卓系统
//阻止默认事件
$(document).bind(“contextmenu”,function(){return false;}); //阻止菜单按钮默认事件
$(document).bind(“selectstart”,function(){return false;}); //阻止选择开始默认事件
$(document).keydown(function(){return key(arguments[0])});

3、经过网上查找据说uc浏览器还是会弹起，自己手机未测试过但也加上该代码
在html页面头部加上此代码

以上仅本人安卓手机测试（有好心人的话也可以送我一台苹果测测）手机自带浏览器、钉钉、微信浏览器皆实现基本需求故而记录此博客，由于踩坑过多才写