Jq监听复制、粘贴、剪切事件

六月初六月初 JavaScipt 0000-00-00 00:00:00

复制、剪切、粘贴这三项在我们使用电脑的过程中是应用极为频繁的三种操作，那么对于该情况如果在我们的网页中，我们是否可以实现对这三种动作的监听呢？

本文就基于JQ来实现对复制、粘贴、剪切三个动作的监听效果给出详细的操作代码。

操作步骤：

1、引入在线Jq，若自己项目建议最好下载一个版本到你本地，不要用在线jq版本。

<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>

2、使用bind实现body区域监听代码部分。

<script type="text/javascript">
    $(document).ready(function() {
        $("body").bind({
            copy : function(){
                alert("执行了复制操作！");
            },
            paste : function(){
                alert("执行了粘贴操作！");
            },
            cut : function(){
                alert("执行了剪切操作！")
            }
        });
    });
</script>

3、使用jq提供的on监听复制、剪切、粘贴

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
	</head>
	<body>
		<p>六月初博客站</p>
		<input type="text">
		<script>
			$(document).ready(function() {
				$("body").on({
					copy: function() {
						var text = window.getSelection().toString(); //获取复制的内容
						console.log(text);
					},
					paste: function(e) { //出于安全原因，浏览器不允许获取用户剪切版中的内容，当然你可以获取粘贴后的内容
					},
					cut: function() {
						var text = window.getSelection().toString(); //获取剪切的内容
						console.log(text);
					}
				});
			});
		</script>
	</body>
</html>

以上便是基于jq实现对于页面上复制、剪切、粘贴操作的监听。

六月初字帖坊小程序 你想要的字帖模板及工具，这里都有！