Question

这是我的表

<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值altrough console.log按预期工作？

修改：目标是，如果您点击＆＃34;复制＆＃34;附加对象为例如名称，进入剪贴板保罗约翰逊。如果在街上，则复制假街等。

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 检查您的浏览器是否支持复制命令。

希望这有帮助。

Document.execCommand不能按我的预期工作

1 个答案: