javascript - onpaste/paste 事件在最初的几次尝试中没有为表格触发

Question

特定于 Google Chrome -这是一个内部使用的应用程序，不需要跨浏览器兼容性

参见 http://jsfiddle.net/spetnik/vpcyt4yv/

我有一个表，我试图在其中粘贴数据。我这样选择了单个单元格:

<td tabindex="0">

我最初尝试将 onpaste 事件添加到 TD 元素本身，但这根本不起作用。因此，我将事件添加到表元素并检查以确保焦点元素是 TD，然后将数据粘贴到该元素:

document.getElementById("tblData").onpaste = function(evt){
    if(document.querySelector(":focus").tagName.toLowerCase() != "td"){
        return;
    }

    document.querySelector(":focus").innerText = evt.clipboardData.getData("text/plain");
};

虽然这确实有效，但事件通常不会在第一次尝试时触发。看来我需要要么 a) 在表格中随机点击几次(每次都不同)，要么 b) 将焦点更改到另一个窗口，然后在事件触发之前再次返回。在 jsFiddle 中，我在事件的最开头添加了一个 console.log() 调用，这样我就可以准确地看到事件在调试 Pane 中触发的时间。

查看上面的 jsFiddle 或仅查看 https://jsfiddle.net/spetnik/vpcyt4yv/embedded/result/ 处的结果

Answer 1

哇。罪魁祸首似乎是 -webkit-user-select/user-select CSS!当我注意到只有在最初单击并将鼠标拖到单元格上后才允许粘贴时，我发现了这一点(这解释了随机单击 - 只有在我单击直到我的鼠标移动到中间单击才有效)。我删除了这个 CSS，现在它可以工作了。当然，现在我需要找到一种解决方法来防止选择，但至少我不再感到难过。

编辑: 似乎在普通元素(例如，将 onpaste 设置为元素本身的 DIV)上，当 -webkit-user-select 设置为 none 时，onpaste 根本不起作用。我提交了错误报告 here

编辑 2: 我设法找到了以下解决方法:如果我在按下 Ctrl-V 之前以编程方式选择单元格的内容，那么它将起作用，即使使用 -webkit-user-选择设置为无。我通过将以下事件处理程序(此处显示的 jQuery)添加到 TD 来完成此操作(这在 -webkit-user-select 设置为 none 的独立 DIV 中仍然不起作用):

$(elem).click(function(evt){
    var selection = window.getSelection();            
    var range = document.createRange();
    range.selectNodeContents(this);
    selection.removeAllRanges();
    selection.addRange(range);
})