js模拟Ctrl+C复制、Ctrl+V粘贴功能之tabindex、focus、keyCode

话不多说，今天遇到了一个大坑，是这样的，一颗DOM树中有一个节点，要对其实现Ctrl+C复制、Ctrl+V粘贴功能。起初拿到这个任务，我首先想到的是选中它，然后按下Ctrl、C实现复制，再按下Ctrl、V实现粘贴功能。嗯，大体流程就是这样。
问题来了，选中它，也就是说这个节点处于焦点状态，按下Ctrl+C实现复制功能，不急，这步走通了，下一步粘贴就好办多了。
节点处于焦点状态，之前用得最多的恐怕就是input元素了吧，在input上用得一帆风顺，可今天的这个节点并不是input，而是一个div，按照input的思路，往下写了几行代码，经断点测试，发现怎么也进不了节点处于焦点状态下的方法函数fun，代码如下：

$("div").on("focus",function(){
    $(this).on("keydown",function(event){
        if(event.ctrlKey == true){
            alert("你使用了Ctrl功能！");
            if(event.keyCode == 67){
                alert("你使用了Ctrl+C组合件功能！");
            }
        }
    })

无奈之余，上网搜了些资料，发现出现这个问题的原因在于，默认状态下，想要对普通节点监听获得焦点功能是无效的，只有input才能监听焦点事件。具体解决方案如下：
在对普通节点（input节点除外）欲对其监听焦点事件之前，必须做一件事，那就是对其设定tabindex值，如：
$(“div”).attr(“tabindex”,”0”);
tabindex属性：用于设置元素在控件中的焦点顺序；
-1：（默认值，input节点除外）表示当前元素不能获得焦点
0：表示当前节点的焦点根据在代码中的位置顺序被选择
大于0：根据递增的值顺序和代码中的位置顺序来被选择

于是乎，问题得以解决！完整代码如下：

$("div").attr("tabindex","0");
$("div").on("focus",function(){
    $(this).on("keydown",function(event){
        if(event.ctrlKey == true){
            alert("你使用了Ctrl功能！");
            if(event.keyCode == 67){
                alert("你使用了Ctrl+C组合件功能！");
            }
        }
    })
})

这样就真的OK了吗！no。。。虽然功能成形了，正当喜出望外的时候问题来了，我首次ctrl+C、Ctrl+V某个元素的时候没问题，可当我再次Ctrl+V或Ctrl+C、Ctrl+V某个元素的时候蹭蹭地冒出来一大堆，我明明就按了一下ctrl+V，怎么就凭空跳出那么多来了呢，头都大了，涉及到的JS文件也比较多，打了好多断点，于事无补，旁边的同事也一起来搞了好半天，没搞定，不经意间他跑去Ctrl+C功能判断里面alert了一下，又在Ctrl+V判断里面去alert了一下，我发现他们两个alert的次数是一样的！而整个js文件只执行了一次！为啥呢。。。我也不知道是怎么想到那个点子上去的，或许是感觉，我说要不Ctrl+C功能判断（true）完成后，将 event.keyCode = 0 ；试试！
一语中的，还还真就可以了，每次Ctrl+V都只粘贴一次！于是乎！任务终于完成！完整代码如下：

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});//调用增加节点方法函数，默认粘贴到画布左上角  

                }               
            }
        }
    })
})

js模拟Ctrl+C复制、Ctrl+V粘贴功能之tabindex、focus、keyCode

猜你喜欢