JS实现网页全屏、禁止复制网页文字、禁止粘贴功能

您所在的位置：网站首页 › 怎么退出网页的全屏模式啊 › JS实现网页全屏、禁止复制网页文字、禁止粘贴功能

JS实现网页全屏、禁止复制网页文字、禁止粘贴功能

2024-01-23 15:54| 来源: 网络整理| 查看: 265

一、网页全屏、退出网页全屏

使用requestFullscreen()方法实现网页全屏，exitFullscreen()方法退出网页全屏。以下是实现网页全屏的示例代码：

Login Form html, /* 该CSS用于进去全屏后，背景颜色改变 */ body { height: 100%; background-color: #fff; /* 设置全屏模式下的背景颜色 */ color: #000; /* 设置全屏模式下的字体颜色 */ font-size: 16px; /* 设置全屏模式下的字体大小 */ } 进入全屏退出全屏 //进入全屏 function ins(){ var element = document.body; // 需要全屏的元素，这里指定为 body 元素 if (element.requestFullscreen) { element.requestFullscreen(); } else if (element.webkitRequestFullscreen) { /* Safari */ element.webkitRequestFullscreen(); } else if (element.msRequestFullscreen) { /* IE11 */ element.msRequestFullscreen(); } } //退出全屏 function outs(){ if (document.exitFullscreen) { document.exitFullscreen(); } else if (document.webkitExitFullscreen) { /* Safari */ document.webkitExitFullscreen(); } else if (document.msExitFullscreen) { /* IE11 */ document.msExitFullscreen(); } }

在网页全屏模式下，用户可以随时按Esc键或者F11键退出全屏模式，这是浏览器允许的默认操作，无法阻止。这是为了保证用户对于自己的浏览器有完全的控制权，防止恶意网站窃取用户的隐私。

二、禁止复制网页文字

监听输入框的 paste 事件，使用 e.preventDefault() 阻止浏览器默认的粘贴操作，然后使用 e.clipboardData.getData('text/plain') 获取粘贴板中的内容，最后使用 document.execCommand('insertText', false, ''); 清空输入框的内容

Login Form 该文字禁止复制 //防止复制文字 document.addEventListener('copy', function(e){ e.preventDefault(); var copyTxt = window.getSelection().toString(); //将复制内容改为空 var fakeTxt = " "; if(copyTxt) { copyTxt = fakeTxt; if(e.clipboardData) { e.clipboardData.setData('text/plain', copyTxt); } else if(window.clipboardData) { window.clipboardData.setData('Text', copyTxt); } } alert('不允许复制！'); });

在上述代码中，我们监听了输入框paste事件，当用户进行粘贴操作时，e.preventDefault()可以防止默认的粘贴操作，不允许用户进行粘贴操作。同时，我们可以通过e.clipboardData获取粘贴内容，并通过document.execCommand("insertHTML", false, pasteText)将内容插入到输入框中。这里我们插入粘贴内容是为了让浏览器无法阻止我们的paste事件，但是实际粘贴时内容是不会显示在输入框中的。

三、输入框禁止粘贴

需要阻止用户在输入框中粘贴内容，可以使用 clipboardData 属性以下是阻止 paste 事件并清空粘贴板内容的示例代码：

Login Form //防止粘贴 var myInput = document.getElementById('myInput'); myInput.addEventListener('paste', function(e) { e.preventDefault(); var pasteValue = e.clipboardData.getData('text/plain'); document.execCommand('insertText', false, ''); });

在这个示例中，我们监听了输入框的 paste 事件，使用 e.preventDefault() 阻止浏览器默认的粘贴操作，然后使用 e.clipboardData.getData('text/plain') 获取粘贴板中的内容，最后使用 document.execCommand('insertText', false, ''); 清空输入框的内容

【本文地址】

JS实现网页全屏、禁止复制网页文字、禁止粘贴功能

JS实现网页全屏、禁止复制网页文字、禁止粘贴功能

今日新闻

推荐新闻