✂ 学习 - 拦截用户的复制操作

SLYLXDYMJ

字数：218 字

时长：1 分钟

🔥 简单粗暴，禁用复制内容。
PS：如果用户懂开发，就可以通过各种途径（比如 F12 等），获取内容。

CSS 实现

不让用户选中，就无法复制了
注意：该方法在 IE 中有 BUG，不太好说，建议试下，使用全选之类的操作还是能选中的

div {
  -webkit-user-select: none; /* Safari */
  -ms-user-select: none; /* IE 10+ and Edge */
  user-select: none; /* Standard syntax */
}

JS 实现

监听 copy 事件实现，阻止默认行为。

  document.addEventListener('copy', function (e) {
    // 获取用户选中的内容
    // window.getSelection().toString()
    
    // IE => window.clipboardData
    var clipboardData = e.clipboardData || window.clipboardData
  
    if (!clipboardData) return null

    // 阻止游览的默认复制内容的操作
    // 注意：若不阻止，就算后面手动设置了内容，也会被覆盖掉
    e.preventDefault()

    // 通过 setData 方法设置希望设置的文本内容
    clipboardData.setData('text/plain', '')
  })