天天看点

监听粘贴按键

<!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>      

继续阅读