javascript - Document.execCommand 没有按我的预期工作

Question

这是我的 table

<table>
  <tr>
    <th>Name</th>
    <td>Paul Johnson</td>
    <th>Street</th>
    <td>Fake Street</td>
  </tr>
  <tr>
    <th>State</th>
    <td>California</td>
    <th>Car</th>
    <td>Cadillac</td>
  </tr>
</table>

我的脚本是由mouseenter事件执行的:

$('th').on("mouseenter mouseleave", function(e) {if (e.type === 'mouseenter') {

});

在它的内部有一个带有内部链接对象的工具栏

toolbar = $("<div />").css({
    "padding": "5px",
    "background" : "#F8F8F8",
    "borderRadius" : "5px 0 5px 5px"
  });

  var link = $("<a />").css({
    "display" : "block",
    "height" : "20px",
    "width" : "20px",
    "marginBottom" : "5px",
    "background-size" : "100%",
    "position" : "relative"})
    .attr({"target" : "_blank"});

我的变量thisNext获取下一个td元素的文本

  var thisNext = $( $(this).next() ).text();

问题为什么我的 var 副本不复制 thisNext 值，尽管 console.log 按我的预期工作？

编辑: 目标是，如果您单击“复制”附加在名称上的对象，则进入剪贴板 Paul Johnson。如果在街道上，则复制假街道等。

var copy = link.clone().on("click", function (e) {
    e.preventDefault();
    console.log ("thisNext ");
    thisNext.execCommand('copy');
}

Answer 1

<强> Working Pen

问题来自以下行:

thisNext.execCommand('copy');

copy 命令始终复制选择内容，因此我们必须先选择 td 的内容，然后执行注释，最后重置选择内容:

var copy = link.clone().on("click", function (e) {
    e.preventDefault();

    var td = e.target.parentNode.parentNode;

    do {
      td = td.nextSibling;
    } while(td && td.nodeType !== 1); // 1 == Node.ELEMENT_NODE

    var range = document.createRange();  

    range.selectNode(td); 

    window.getSelection().addRange(range);

    document.execCommand('copy');   

    // Remove the selections - NOTE: Should use
    // removeRange(range) when it is supported  
    window.getSelection().removeAllRanges();  
})

注意:您可以使用This link检查您的浏览器是否支持复制命令。 。

希望这有帮助。