js禁用网页鼠标右键及复制

原创于 2020-12-01 09:52:21 发布 · 684 阅读

0 ·

本内容遵循CC 4.0 BY-SA版权协议

收录于

html

开发中可能需禁止网页内容被复制，本文介绍两种实现方法，一是在html元素内用标签禁用，二是用js代码控制，还可指定控制区域。此外，针对网页内容可拖动到Excel复用的问题，也提到在js脚本中添加相应内容来解决。

在开发过程中，我们可能会遇到不想让使用者使用网页的复制功能对网页内容进行复制，如何来实现呢？

整理了下，有以下两种方法：

1：在html元素内使用标签禁用：

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
</head>
<body oncontextmenu="return false" onselectstart="return false" oncopy="return false">
<ul>
  <li><a href="###">沉浮动静皆人生</a></li>
  <li><a href="###">沉浮动静皆人生</a></li>
  <li><a href="###">沉浮动静皆人生</a></li>
  <li><a href="###">沉浮动静皆人生</a></li>
</ul>
</body>
</html>

2：使用js代码进行控制：

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
</head>
<body>
<ul>
  <li><a href="###">沉浮动静皆人生</a></li>
  <li><a href="###">沉浮动静皆人生</a></li>
  <li><a href="###">沉浮动静皆人生</a></li>
  <li><a href="###">沉浮动静皆人生</a></li>
</ul>
<script>
document.oncontextmenu = function(){
  return false;
}
document.onkeydown = function(){
  if (event.ctrlKey && window.event.keyCode==67){
    return false;
  }
}
document.body.oncopy = function (){
  return false;
}
//不建议连选中文本都不行
document.onselectstart = function(){
  //return false;
}
</script>
</body>
</html>

当然，上面js代码是控制整个页面不可复制，如果要控制某个区域的话，制定区域元素即可：

document.getElementById("active-intro").oncontextmenu = function () {
                event.returnValue = false;
            }

补充。

还有一种是网页上可以鼠标拖动，然后将内容选中，选中的内容直接拖动到excel,这也是一种数据被复用的问题，如何解决，在js脚本中增加如下：

//禁用鼠标选中
document.body.onselectstart = function () {
    return false;
};

标签

#js #javascript #html