监听粘贴按键

最新推荐文章于 2023-11-10 15:29:51 发布

xiaoerbuyu1233

最新推荐文章于 2023-11-10 15:29:51 发布

阅读量456

点赞数

分类专栏：杂文

本文链接：https://blog.csdn.net/xiaoerbuyu1233/article/details/124633176

版权

JavaScript 键盘事件剪贴板事件处理 DOM操作

关键词由CSDN通过智能技术生成

杂文专栏收录该内容

20 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
    <head>
        <title>键盘事件</title>
    </head>
    <body style="text-align: center;"  onkeydown="return cellkeydown(event)">
        <h1>键盘事件</h1>
		 <textarea id="textArea" ></textarea>
        <p id="demo1"></p>
        <p id="demo2"></p>
        <p id="demo3"></p>
        <div id="div">222222222222222222</div>
		<input id="output" type="text"/>
	<button id="paste">粘贴</button>

    </body>
        <!-- <script type="text/javascript" src="jquery-3.6.0.js"></script> -->
		<script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
		
        <script type="text/javascript">
		
		function cellkeydown(event) {
            if (event.ctrlKey && event.keyCode == 86) {
                var ss = document.getElementById("textArea");
                ss.focus();
                ss.select();
                // 等50毫秒，keyPress事件发生了再去处理数据
                setTimeout("dealwithData()", 50);
            }
        }
        function dealwithData(event) {
            var ss = document.getElementById("textArea");
            alert(ss.value);
            ss.blur();

        }
		
		
		function paste() {
		var isCopy = false; //判断是否能执行'复制粘贴（新增）节点到dom'功能的判断条件,初始为false(不允许 )
		$("div").attr("tabindex","0");
		$("div").on("focus",function(){
			$(this).on("keydown",function(event){
				if(event.ctrlKey){
					if(event.keyCode == 67){
						alert("你使用了Ctrl+C组合件功能！");
						event.keyCode = 0;
					}
					if(event.keyCode == 86){
						if(isCopy){ 
							var max = $(this).size()+1;
							var addId = "HKFlow_cnode_"+max;
							var type = $(this).find("b").attr("class").split("_")[1];

							HKPM.addNode(addId,{name: "cnode_"+max, left: 38, top: 28, type: type});//调用增加节点方法函数，默认粘贴到画布左上角  

						}               
					}
				}
			})
		})

			<!-- navigator.permissions.query({ -->
			  <!-- name: 'clipboard-read' -->
			<!-- }).then(permissionStatus => { -->
			  <!-- // permissionStatus.state 的值是 'granted'、'denied'、'prompt': -->
			  <!-- console.log(permissionStatus.state); -->
			<!-- }); -->
			
			<!-- setTimeout(async () => {  -->
				<!-- // 读取剪切板内容 -->
				<!-- const text = await navigator.clipboard.readText();  -->
				<!-- console.log(text);  -->
			<!-- }, 2000); -->


		  <!-- var pasteText = document.querySelector("#output"); -->
		  <!-- pasteText.focus(); -->
		  <!-- document.execCommand("paste"); -->
		  <!-- console.log(pasteText.textContent); -->
		  <!-- alert('---------'+pasteText.textContent); -->
		}

		document.querySelector("#paste").addEventListener("click", paste);
		
            //DOM实现
            /*事件监听函数说明
            addaddEventListener(even，function(),true/false)
            第一个参数是事件，例如"click",引号是必须的，不要用on开头，例如"onclick"。
            第二个参数是函数，可以传参，例如function(even){代码段}。
            第三个参数可选，使用布尔值，决定事件监听顺序（冒泡或者捕获），新手（包括本人）一般不使用
            事件冒泡:事件会从最内层的元素开始发生,一直向上传播,直到document对象；
            事件捕获:与事件冒泡相反,事件会从最外层开始发生,直到最具体的元素。
            */
            <!-- document.addEventListener("keydown",function(even){ -->
                <!-- document.getElementById("demo1").textContent ="按下的键码是：" + even.keyCode; -->
            <!-- }); -->
            //jQuery实现
            /*jQuery方法说明
            $(element)选中元素，直接选中或者通过id，类等方法选中
            .method()执行方法，具体方法请查询：
            https://www.w3school.com.cn/jquery/jquery_reference.asp
            */
            <!-- $(document).keydown(function(even){ -->
                <!-- $("#demo2").text("按下的键码是：" + even.keyCode); -->
            <!-- }) -->
            /*特别说明：
            document和jquery选中元素后改变文本方式不同： = 和 ()
            个人理解是:textContent是元素的一个属性，而text是jquery的一个方法（jquery本质是一个js文件，是一个方便的框架）
            */

        </script>
</html>

由chrome剪贴板问题研究到了js模拟鼠标键盘事件 - 静逸 - 博客园

xiaoerbuyu1233

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
1
评论
监听粘贴按键

<!DOCTYPE html><html> <head> <title>键盘事件</title> </head> <body style="text-align: center;" onkeydown="return cellkeydown(event)"> <h1>键盘事件</h1> <textarea id="textAre.
复制链接

扫一扫

专栏目录