Question

我已经搜索过这个网站的类似问题，但我仍然感到茫然。

基本上，我正在为一位正在前进的同事接手一个项目。他对内联网页面的计划应该有多个textareas，每个textareas都有自己的预定义文本和他们自己的＆＃34;复制文本＆＃34;按钮。

点击后，它会复制到用户的剪贴板。我拆开了代码，无论出于何种原因，当我添加新的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>

Answer 1

它无效，因为您只是将第一个按钮挂钩到点击事件，因为您只获得对第一个按钮的引用：

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

将其更改为：

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

.querySelector() 仅返回对找到的与选择器匹配的第一个元素的引用。 querySelectorAll() 会返回一个节点列表，其中包含与选择器匹配的所有元素。

接下来，您需要将click事件附加到该节点列表中的每个元素，如果将这些节点列表转换为Arrays， .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>

Answer 2

document.querySelectorAll（）选择所有项目

import Cocoa

let string = "Some text"
let attributes = [NSAttributedStringKey.underlineStyle : NSUnderlineStyle.styleSingle.rawValue]
let attributedString = NSAttributedString(string: string, attributes: attributes)

/* later */

let newString = attributedString.string
print(newString) // prints: "Some text"
print(type(of: newString)) // prints: String

Answer 3

我使用这种方式，最好能理解。

1-获取所有值并将其存储在var中。 2-创建文本区域并追加。 3-将var值存储到texterea。 4-获取文本区域值。 5-复制它：）

var form = document.getElementById('Note_form');
var title = document.getElementById('inpt_title');


// tool: Copy Note Form + Note Title .
function Copy_Note() {

    var copyTextarea = form.value+ title.value;

    var dummy = document.createElement("textarea");
    document.body.appendChild(dummy);
    dummy.value = copyTextarea;
    dummy.select();
    try {
        var msg = document.execCommand('copy') ? 'successful' : 'unsuccessful';
        console.log('Copying copyTextarea command was ' + msg);
    } catch (err) {
        console.log('Whoops, unable to copy');
    }

    document.body.removeChild(dummy);










}

                <!-- title -->
                <input type="text" id="inpt_title"  class="copy_erea" placeholder="The title.." maxlength="70" autofocus>
           
       
                <!-- the note -->
                <textarea id="Note_form" class="copy_erea" placeholder="The Content.." oninput="note_Edite(this.value);"></textarea>
          
                  <button id="copy_btn" onclick="Copy_Note();">copy</button>

Answer 4

这里也一样。我正在寻找此答案的两天，这个答案对我有用，在另一个线程上找到了。

https://stackoverflow.com/a/51261023/2347501

digits = []

for num in test_list:
    digits.extend([int(i) for i in str(num)])

Javascript - 在一个页面上复制多个textareas的文本按钮

4 个答案: