Question

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

请参阅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/

的结果

Answer 1

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

编辑：似乎在普通元素（例如将onpaste设置为元素本身的DIV）onpaste在-webkit-user-select设置为none时根本不起作用。我提交了错误报告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);
})

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

1 个答案: