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

最新推荐文章于 2024-04-30 16:57:21 发布

爱摸鱼的呆瓜

最新推荐文章于 2024-04-30 16:57:21 发布

阅读量1.1k

点赞数 2

本文链接：https://blog.csdn.net/m0_58111460/article/details/131117569

版权

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

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

<!DOCTYPE html>
<html>
	<head>
		<title>Login Form</title>
		<meta charset="utf-8">
	</head>
	<style>
		html,
		/* 该CSS用于进去全屏后，背景颜色改变 */
		body {
			height: 100%;
			background-color: #fff;
			/* 设置全屏模式下的背景颜色 */
			color: #000;
			/* 设置全屏模式下的字体颜色 */
		 font-size: 16px;
			/* 设置全屏模式下的字体大小 */
		}
	</style>
	<body>
		<button  onclick="ins()">进入全屏</button>
		<button  onclick="outs()">退出全屏</button>
	</body>
	<script>
		//进入全屏
		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();
			}
		}
	</script>
</html>

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

二、禁止复制网页文字

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

<!DOCTYPE html>
<html>
	<head>
		<title>Login Form</title>
		<meta charset="utf-8">
	</head>
	<body>
		<div>
			<a href="#">该文字禁止复制</a>
		</div>
	</body>
	<script>
		//防止复制文字
		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('不允许复制！');
		});
	</script>
</html>

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

三、输入框禁止粘贴

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

<!DOCTYPE html>
<html>
	<head>
		<title>Login Form</title>
		<meta charset="utf-8">
	</head>
	<body>
		<div>
			<input type="text" id="myInput" value="禁止粘贴"/>
		</div>
	</body>
	<script>
		//防止粘贴
		var myInput = document.getElementById('myInput');
		myInput.addEventListener('paste', function(e) {
		  e.preventDefault();
		  var pasteValue = e.clipboardData.getData('text/plain');
		  document.execCommand('insertText', false, '');
		});
	</script>
</html>

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