Javascript - 複製一個頁面上的多個文本區域的文本按鈕

我已經瀏覽了本網站的類似問題，但我仍然處於困境。Javascript - 複製一個頁面上的多個文本區域的文本按鈕

基本上，我正在接管一個正在進行的同事的項目。他的內聯網頁面計劃應該有多個文本區域，每個文本區域都有自己的預定義文本和自己的「複製文本」按鈕。

點擊後，它會複製到用戶的剪貼板。我將代碼分開，無論出於何種原因，當我添加新的textareas和一個按鈕時，它都不會複製。第一個會。

我在想什麼或做錯了什麼？

<html> 
<head> 
    <script> 
    window.onload = function() { 
     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('Whoops, unable to copy'); 
      } 
     }); 
    } 
    </script> 
</head> 
<body> 
    <p>Test #1 </p> 

    <div> 
     <textarea class="js-copytextarea" readonly="readonly" style="width:20%;" 
     rows="5">Hello. This is textarea test bed #1</textarea> 
     <button class="js-textareacopybtn">Copy Text (works)</button> 

     <p>Test #2:</p> 

     <textarea class="js-copytextarea" readonly="readonly" style="width:20%;" 
     rows="5">Hi! Welcome to textarea test bed #2 </textarea> 
     <button class="js-textareacopybtn">Copy Text (broken)</button> 
    </div> 
</body> 
</html>

來源

2017-08-03 BlondOverBlue

它不工作，因爲你只掛鉤第一個按鈕到一個點擊事件，因爲你只得到的第一個按鈕的引用：

var copyTextareaBtn = document.querySelector('.js-textareacopybtn');

修改成：

var copyTextareaBtn = document.querySelectorAll('.js-textareacopybtn');

.querySelector()只返回對找到的匹配選擇器的第一個元素的引用。 querySelectorAll()返回一個節點列表，其中包含與選擇器匹配的所有元素。

接下來，你需要點擊事件附加到該節點列表中的每個元素，如果轉換的節點列表到陣列中，.forEach()方法使得循環很容易。

請參見下面的更新的代碼：

window.onload = function() { 
 
    // Get all the elements that match the selector as arrays 
 
    var copyTextareaBtn = Array.prototype.slice.call(document.querySelectorAll('.js-textareacopybtn')); 
 
    var copyTextarea = Array.prototype.slice.call(document.querySelectorAll('.js-copytextarea')); 
 

 
    // Loop through the button array and set up event handlers for each element 
 
    copyTextareaBtn.forEach(function(btn, idx){ 
 
    
 
    btn.addEventListener("click", function(){ 
 
    
 
     // Get the textarea who's index matches the index of the button 
 
     copyTextarea[idx].select(); 
 

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

<div> 
 
    <p>Test #1 
 
    <textarea class="js-copytextarea" readonly="readonly" style="width:20%;" 
 
       rows="5">Hello. This is textarea test bed #1</textarea> 
 
    <button class="js-textareacopybtn">Copy Text (works)</button> 
 
    </p> 
 

 
    <p>Test #2: 
 
    <textarea class="js-copytextarea" readonly="readonly" style="width:20%;" 
 
       rows="5">Hi! Welcome to textarea test bed #2 </textarea> 
 
    <button class="js-textareacopybtn">Copy Text (broken)</button> 
 
    </p> 
 
</div>

來源

2017-08-03 00:33:06

終於得到它的工作！即使在我所有的研究日子裏，我都找不到解決這個問題的辦法。非常感謝@Scott！ – BlondOverBlue

document.querySelectorAll（）選擇所有項目

<script> 

window.onload = function() { 

var copyTextareaBtn = document.querySelectorAll('.js-textareacopybtn'); 

copyTextareaBtn.forEach(function(btn){ 
btn.addEventListener('click', function (event) { 
var copyTextarea = document.getElementById(this.dataset.txtid); 
copyTextarea.select(); 

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

</script> 

</head> 

<body> 
<p>Test #1 </p> 

<div> 
<textarea id="txta1" class="js-copytextarea" readonly="readonly" style="width:20%;" 
rows="5">Hello. This is textarea test bed #1</textarea> 
<button data-txtid="txta1" class="js-textareacopybtn">Copy Text (works)</button> 

<p>Test #2:</p> 

<textarea id="txta2" class="js-copytextarea" readonly="readonly" style="width:20%;" 
rows="5">Hi! Welcome to textarea test bed #2 </textarea> 
<button data-txtid="txta2" class="js-textareacopybtn">Copy Text</button> 

</div>

來源

2017-08-03 00:46:39

通常不是一個好的做法，發佈一個基本上與你之前張貼的答案相同的答案。特別是一個甚至沒有解釋自己。 –

此外，「.forEach」在所有瀏覽器的節點列表中不受支持。 –

Javascript - 複製一個頁面上的多個文本區域的文本按鈕

回答

相關問題