css实现禁止文本被选中，禁止复制的方法，其实很简单，我们可以使用 user-select属性来完成。

user-select属性是css3新增的一个属性，它可以用来控制内容的可选择性，设置或检索是否允许用户选中文本，适用于除替换元素外的所有元素。

user-select基本语法：

  1. user-select: auto|none|text|all;

属性值

值 描述
auto 默认。如果浏览器允许，则可以选择文本。
none 防止文本选取。
text 文本可被用户选取。
all 单击选取文本，而不是双击。

css兼容写法

  1. -moz-user-select:none; /* Firefox私有属性 */
  3. -webkit-user-select:none; /* WebKit内核私有属性 */
  5. -ms-user-select:none; /* IE私有属性(IE10及以后) */
  7. -khtml-user-select:none; /* KHTML内核私有属性 */
  9. -o-user-select:none; /* Opera私有属性 */
  11. user-select:none; /* CSS3属性 */

js控制选中文本

  1. 修改选中文本

    1. document.addEventListener("copy",function(evt){
    2. var clipboard_data = evt.clipboardData || window.clipboardData;
    3. if(!clipboard_data){return;}
    4. var text = window.getSelection().toString();
    5. if(text){
    6.  evt.preventDefault();
    7.  clipboard_data.setData("text/plain",text+"\n\n🤔🤔");
    8. }
    9. })

  2. 控制是否可复制文本

    1. document.onselectstart=function(){
    2.  //return true;允许选中
    3.  //return false;禁止选中
    4. }