WF禁止选中和复制文章

来源:本站原创 点击数: 发布时间:2026年05月09日

有客户不想让某篇文章被轻易复制,可以复制一个新的内容页模版,添加下面的的代码来实现禁止选中和复制文章的功能。

1. 最简单的方法:CSS user-select


这是目前最优雅、最常用的方法。通过 CSS 属性直接告诉浏览器这个元素的内容不可被选中。


.no-copy {
  -webkit-user-select: none; /* Safari */
  -ms-user-select: none;     /* IE 10+ */
  user-select: none;         /* 标准语法 */
}


  • 优点:代码简洁,不影响页面性能。

  • 缺点:用户虽然选不中文字,但如果右键点击“检查”,在 HTML 源码里还是能看到文字。




2. 拦截 JavaScript 事件


如果你想更彻底一点,可以通过 JS 监听并拦截用户的“复制”和“右键”行为。


const targetDiv = document.querySelector('.no-copy');
// 禁止右键菜单
targetDiv.addEventListener('contextmenu', e => e.preventDefault());
// 禁止拷贝行为
targetDiv.addEventListener('copy', e => {
  e.preventDefault();
  alert('抱歉,本内容禁止复制!');
});


  • 组合拳:通常会将 onselectstart (禁止选中) 和 oncopy (禁止复制) 结合使用。