Question

我想将多个div中动态添加的文字保存到剪贴板。

目标我有多个div（Dynamicaly已添加。可以是2或9999），并希望每个textarea都有一个按钮（保存到剪贴板）。

var copyTextareaBtn = document.querySelector('.js-textareacopybtn');

copyTextareaBtn.addEventListener('click', function(event) {
  var copyTextarea = document.querySelector('.js-copytextarea');
  copyTextarea.select();

  try {
    var successful = document.execCommand('copy');
    var msg = successful ? 'successful' : 'unsuccessful';
    console.log('Copying text command was ' + msg);
  } catch (err) {
    console.log('Oops, unable to copy');
  }
});

<div1>
  <textarea class="js-copytextarea" style="width:100%;" rows="5">This is the text that will be selected. Note that you can hide this and implement a secret copy feature.</textarea>
  <button class="js-textareacopybtn">Copy Textarea text</button>
</div1>

<div2>
  <textarea class="js-copytextarea2" style="width:100%;" rows="5">This is the text that will be selected. Note that you can hide this and implement a secret copy feature.</textarea>
  <button class="js-textareacopybtn2">Copy Textarea text</button>
</div2>

<div3>
  <textarea class="js-copytextarea3" style="width:100%;" rows="5">This is the text that will be selected. Note that you can hide this and implement a secret copy feature.</textarea>
  <button class="js-textareacopybtn3">Copy Textarea text</button>
</div3>

Answer 1

由于您正在使用jQuery库，因此可以使用事件委派 on 将Click事件附加到公共类，因此我会影响动态添加一些，如：

$('body').on('click', '[class^="js-textareacopybtn"]', function(){
  $(this).prev('textarea').select();

  try {
    var successful = document.execCommand('copy');
    var msg = successful ? 'successful' : 'unsuccessful';
    console.log('Copying text command was ' + msg);
  } catch (err) {
    console.log('Oops, unable to copy');
  }
})

注意：以下行将检索与点击的textarea相关的上一个button，然后选择它：

$(this).prev('textarea').select();

希望这有帮助。

＆＃13;

$('body').on('click', '[class^="js-textareacopybtn"]', function(){
  $(this).prev('textarea').select();

  try {
    var successful = document.execCommand('copy');
    var msg = successful ? 'successful' : 'unsuccessful';
    console.log('Copying text command was ' + msg);
  } catch (err) {
    console.log('Oops, unable to copy');
  }
})

＆＃13;

This is the text that will be selected. Note that you can hide this and implement a secret copy feature 1.This is the text that will be selected. Note that you can hide this and implement a secret copy feature 2.This is the text that will be selected. Note that you can hide this and implement a secret copy feature 3.

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div1>
  <textarea class="js-copytextarea1" style="width:100%;" rows="5">This is the text that will be selected. Note that you can hide this and implement a secret copy feature 1.</textarea>
  <button class="js-textareacopybtn1">Copy Textarea text 1</button>
</div1>

<div2>
  <textarea class="js-copytextarea2" style="width:100%;" rows="5">This is the text that will be selected. Note that you can hide this and implement a secret copy feature 2.</textarea>
  <button class="js-textareacopybtn2">Copy Textarea text 2</button>
</div2>

<div3>
  <textarea class="js-copytextarea3" style="width:100%;" rows="5">This is the text that will be selected. Note that you can hide this and implement a secret copy feature 3.</textarea>
  <button class="js-textareacopybtn3">Copy Textarea text 3</button>
</div3>

＆＃13;

使用Javascript保存到剪贴板

1 个答案: