4

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

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

我有一个表，我试图允许将数据粘贴到该表中。我使单个单元格可以这样选择：

<td tabindex="0">

我最初尝试将 onpaste 事件添加到 TD 元素本身，但这根本不起作用。因此，我将事件添加到 table 元素并检查以确保焦点元素是 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() 调用，这样我就可以在调试窗格中准确地看到事件何时触发。

请参阅上面的 jsFiddle 或只是https://jsfiddle.net/spetnik/vpcyt4yv/embedded/result/的结果

4

1 回答 1

4

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

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

编辑 2：我设法找到以下解决方法：如果我在按下 Ctrl-V 之前以编程方式选择单元格的内容，那么即使 -webkit-user-select 设置为无，它也会起作用。我通过将以下事件处理程序（此处显示的 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);
})
于 2015-07-03T13:04:43.207 回答