类似于百度文库这样的网站,都是将复制粘贴功能禁用的,只有登录的用户才能够使用。在开发中,为了网页的安全,我们也可以设置页面禁用复制和粘贴的功能
实现的方式很简单,就是自定义页面的复制和粘贴事件,取消默认事件即可
实现代码
<html>
<head>
<title>个人网页</title>
<meta .../>
</head>
<body>
<!--核心代码-->
<script>
window.onload = function(){
document.body.oncopy = function(){
prompt("需要登录才能够使用复制功能");
return false;
};
document.body.onpaste = function(){
prompt("需要登录才能够使用粘贴功能");
return false;
};
//当选中页面中的任何对象时触发onselectstart事件
//对FF浏览器不起作用,但是QQ浏览器倒是起作用的说
document.body.onselectstart = function(){
console.log("未登录,无法选中目标");
return false;
};
</html>
oncopy和onpaste比较少见的两个事件,但是又比较实用,相关的另一个使用的地方就是密码框的安全性增强,虽然h5针对密码输入新增了type=”password”的密码输入框,不过还是可以将这些掩码复制过来,然后放在外面显示,当用户在一个网站记住密码时,而这个网站又被别人用同一个电脑去登录,就会暴露了用户的密码,因此这时候我们可以取消密码输入框的复制和粘贴
<form method="post" action="...">
<label for="username">username:</label>
<input type="text" name="username" placeholder="please input your username:" /><br />
<label for="password">password:</label>
<input type="password" name="password" placeholder="please input your password:" oncopy="return false;" onpaste="return false;" style="font-family:wingwangs;" /><br />
<button type="submit" onclick="this.disabled=true;this.form.submit();">登录</button>
<span> </span>
<button type="reset">重置</button>
</form>