想要在Html页面中禁止选择、复制、右键,有多种实现方法。以下是其中两种实现方法:
1.使用CSS控制
在需要控制的页面元素中设置CSS样式,包括text-select:none、-moz-user-select:none、-webkit-user-select:none、user-select:none、-webkit-touch-callout:none。这些样式的作用分别是禁止文本选择、禁止在火狐浏览器中选择文本、禁止在谷歌浏览器中选择文本、禁止选择文本、禁止长按菜单(用于禁止iOS设备上弹出的长按弹出菜单)。
/* 禁止选择、禁止右键 */
.not-selectable{
-webkit-touch-callout: none;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
/* 禁止选择 */
.no-select {
-webkit-touch-callout:none;
-webkit-user-select:none;
-moz-user-select:none;
-ms-user-select:none;
user-select:none;
cursor: default; //去除鼠标样式
}
2.使用JavaScript控制
可以使用JavaScript对文本框进行禁止选择、禁止复制、禁止右键的控制。例如下面的示例代码:
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<!-- 禁止复制、禁止选择 -->
<script type="text/javascript">
document.oncontextmenu=new Function("event.returnValue=false;"); //禁止右键
document.onselectstart=new Function("event.returnValue=false;"); //禁止选择
document.oncopy=new Function("event.returnValue=false;"); //禁止复制
</script>
</head>
<body>
这是一个禁止选择和禁止复制的页面。
</body>
</html>
通过以上两种方法,可以实现在Html页面中禁止选择、复制、右键。需要注意的是这种做法一方面可以保护页面内容,但同时也可能会给用户带来一定的不便,因此需要根据实际情况来选择是否使用。
本站文章如无特殊说明,均为本站原创,如若转载,请注明出处:详解Html页面中内容禁止选择、复制、右键的实现方法 - Python技术站