如何禁止网页复制粘贴?我学fei了

JavaScript/前端
449
0
0
2022-07-01

对于禁止网页复制粘贴,也许你并不陌生。一些网页是直接禁止复制粘贴;一些网页,则是要求登陆后才可复制粘贴;还有一些网站,复制粘贴时会带上网站的相关来源标识信息。

  • 如何禁止网页复制粘贴
const html = document.querySelector('html');
html.oncopy = () => {
    alert('你复想制我呀');
    return false;
};
html.onpaste = () => false;
  • 在复制时做些别的操作,比如跳转登陆页面
const html = document.querySelector('html');
html.oncopy = (e) => {
    console.log(e);
    // 比如指向百度或者登陆页 
    // window.location.href='http://www.baidu.com';
};
html.onpaste = (e) => {
    console.log(e);
};
  • 如何使用 js 设置/获取剪贴板内容
//设置剪切板内容
document.addEventListener('copy', () => {
    const clipboardData =
    event.clipboardData || event.originalEvent?.clipboardData;
    clipboardData?.setData('text/plain', '不管复制什么,都是我!');
    event.preventDefault();
});
//获取剪切板的内容
document.addEventListener('paste', () => {
    const clipboardData =
    event.clipboardData || event.originalEvent?.clipboardData;
    const text = clipboardData?.getData('text');
    console.log(text);
    event.preventDefault();
});

有什么用

  • 对于注册输入密码等需要输入两次相同内容的场景,应该是需要禁止粘贴的,这时候就可以禁止对应输入框的复制粘贴动作。
  • 登陆才能复制。很多网站上的页面内容是不允许复制的,这样可以防止用户或者程序恶意的去抓取页面数据