Question

var ShortCut = document.querySelector('.Copy_Link');
ShortCut.addEventListener('click', function(event)
{
    var ShortCut = document.querySelector('.Copy_Container');
    ShortCut.focus();
    ShortCut.select();
try
{
    var successful = document.execCommand('copy');
    var msg = successful? 'successful': 'unsuccessful';
    console.log('Copying the shortcut is ' + msg);
}
catch (err)
{
    console.log('Unsuccessful copying.');
}
});

这是一个从隐藏文本区域复制一个链接的脚本。我想在同一页面上有几个单独的链接，但是这个脚本：

var ShortCut = document.querySelectorAll('.Copy_Link1, .Copy_Link2, .Copy_Link3');
ShortCut.addEventListener('click', function(event)
{
    var ShortCut = document.querySelectorAll('.Copy_Container1, .Copy_Container2, .Copy_Container3');
    ShortCut.focus();
    ShortCut.select();
try
{
    var successful = document.execCommand('copy');
    var msg = successful? 'successful': 'unsuccessful';
    console.log('Copying the shortcut is ' + msg);
}
catch (err)
{
    console.log('Unsuccessful copying.');
}
});

失败。

链接：

<SPAN class="Copy_Link1">Copy the shortcut link 1</SPAN>
<TEXTAREA class="Copy_Container1" Hidden ReadOnly>
TEXT FOR COPYING INTO CLIPBOARD 1
</TEXTAREA>

<SPAN class="Copy_Link2">Copy the shortcut link 2</SPAN>
<TEXTAREA class="Copy_Container2" Hidden ReadOnly>
TEXT FOR COPYING INTO CLIPBOARD 2
</TEXTAREA>

<SPAN class="Copy_Link3">Copy the shortcut link 3</SPAN>
<TEXTAREA class="Copy_Container3" Hidden ReadOnly>
TEXT FOR COPYING INTO CLIPBOARD 3
</TEXTAREA>

我希望你明白我的意思。我甚至找不到一个在我的特定情况下工作的类似解决方案，我尝试了几种方法，但只有这一种方法有效。如果有什么不清楚的地方，请随时提出。

Answer 1

您可以在跨度上放置一个数据元素，告诉它选择哪个textarea。

$('.Copy_Link').on('click', function(e){
  var target = document.getElementById(this.dataset.target);
  
  target.focus();
  target.select();
  
  try {
    var successful = document.execCommand('copy');
    var msg = successful ? 'successful' : 'unsuccessful';
    console.log('Copying the shortcut is ' + msg);
  } catch (err) {
    console.log('Unsuccessful copying.');
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<SPAN class="Copy_Link" data-target="Copy_Container1">Copy the shortcut link 1</SPAN>
<TEXTAREA id="Copy_Container1" Hidden ReadOnly>
TEXT FOR COPYING INTO CLIPBOARD 1
</TEXTAREA>

<SPAN class="Copy_Link" data-target="Copy_Container2">Copy the shortcut link 2</SPAN>
<TEXTAREA id="Copy_Container2" Hidden ReadOnly>
TEXT FOR COPYING INTO CLIPBOARD 2
</TEXTAREA>

<SPAN class="Copy_Link" data-target="Copy_Container3">Copy the shortcut link 3</SPAN>
<TEXTAREA id="Copy_Container3" Hidden ReadOnly>
TEXT FOR COPYING INTO CLIPBOARD 3
</TEXTAREA>

许多不同的链接要复制

1 个答案: