保存到剪貼板的Javascript

Question

我想保存到剪貼板一些文本添加dynamicaly在多個div。

目標：我有多個div（動態添加。可以是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到公共類附加點擊事件，所以我會影響動態添加的，如：

$('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(); 

希望這會有所幫助。

$('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'); 
 
    } 
 
})

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.

<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>