Question

我正在创建一个在文本字段中包含各种脚本的网页，我的团队只需单击按钮即可复制文本字段中的内容，以便将其粘贴到设备中以运行脚本。但是，由于javascript运行HTML代码中的最后一个脚本，所以按钮都执行最后一个脚本所说的内容。我需要将它们限制为按钮所在的div。我添加了一个屏幕截图来显示它的外观，但我希望有一种方法可以完成。

我给每个文本区域命名，脚本专门声明调用该ID，但是当我单击按钮时 - 它只会复制第3个DIV的字段

Screenshot of what the page looks like

    <div class="row">
      <div class="col-md-4 col-sm-4">
       <div class="panel panel-default">
        <div class="panel-heading">
         <b>IAD Config - 2400s ONLY</b>
        </div>

        <div class="panel-body">
         <textarea id="iad" rows="5">
          IAD Config
         </textarea>
        </div>

        <div class="panel-footer">
         <button id="iadcopy">Copy</button>
          <script>
             var input  = document.getElementById("iad");
             var button = document.getElementById("iadcopy");

             button.addEventListener("click", function (event) {
                 event.preventDefault();
                 input.select();
                 document.execCommand("copy");
             });
          </script>
        </div>
       </div>
      </div>

    <div class="row">
      <div class="col-md-4 col-sm-4">
       <div class="panel panel-default">
        <div class="panel-heading">
         <b>ACL</b>
        </div>

        <div class="panel-body">
         <textarea id="acl" rows="5">
          ACL script
         </textarea>
        </div>

        <div class="panel-footer">
         <button id="aclcopy">Copy</button>
          <script>
             var input  = document.getElementById("acl");
             var button = document.getElementById("aclcopy");

             button.addEventListener("click", function (event) {
                 event.preventDefault();
                 input.select();
                 document.execCommand("copy");
             });
          </script>
        </div>
       </div>
      </div>

    <div class="row">
      <div class="col-md-4 col-sm-4">
       <div class="panel panel-default">
        <div class="panel-heading">
         <b>NOC Username</b>
        </div>

        <div class="panel-body">
         <textarea id="noc" rows="5">
          ACL script
         </textarea>
        </div>

        <div class="panel-footer">
         <button id="noccopy">Copy</button>
          <script>
             var input  = document.getElementById("noc");
             var button = document.getElementById("noccopy");

             button.addEventListener("click", function (event) {
                 event.preventDefault();
                 input.select();
                 document.execCommand("copy");
             });
          </script>
        </div>
       </div>
      </div>

Answer 1

你用你的内联javascript覆盖input的内容（一般来说这通常是一个坏主意）。通过使它们成为唯一的变量名，它会复制正确的变量名。以更加编程的方式重构这一点可能是一个好主意，使用jQuery选择最接近的textarea进行复制，或者为每个对赋予相同的类名，以便正确定位目标。

注意 - 因为您在声明（并重新声明button）后立即添加事件侦听器，而您的方法不是最好的，它不会遇到与重新声明input相同的问题。

 <div class="row">
      <div class="col-md-4 col-sm-4">
       <div class="panel panel-default">
        <div class="panel-heading">
         <b>IAD Config - 2400s ONLY</b>
        </div>

        <div class="panel-body">
         <textarea id="iad" rows="5">
          IAD Config
         </textarea>
        </div>

        <div class="panel-footer">
         <button id="iadcopy">Copy</button>
          <script>
             var input1  = document.getElementById("iad");
             var button = document.getElementById("iadcopy");

             button.addEventListener("click", function (event) {
                 event.preventDefault();
                 input1.select();
                 document.execCommand("copy");
             });
          </script>
        </div>
       </div>
      </div>

    <div class="row">
      <div class="col-md-4 col-sm-4">
       <div class="panel panel-default">
        <div class="panel-heading">
         <b>ACL</b>
        </div>

        <div class="panel-body">
         <textarea id="acl" rows="5">
          ACL script
         </textarea>
        </div>

        <div class="panel-footer">
         <button id="aclcopy">Copy</button>
          <script>
             var input2  = document.getElementById("acl");
             var button = document.getElementById("aclcopy");

             button.addEventListener("click", function (event) {
                 event.preventDefault();
                 input2.select();
                 document.execCommand("copy");
             });
          </script>
        </div>
       </div>
      </div>

    <div class="row">
      <div class="col-md-4 col-sm-4">
       <div class="panel panel-default">
        <div class="panel-heading">
         <b>NOC Username</b>
        </div>

        <div class="panel-body">
         <textarea id="noc" rows="5">
          ACL script
         </textarea>
        </div>

        <div class="panel-footer">
         <button id="noccopy">Copy</button>
          <script>
             var input  = document.getElementById("noc");
             var button = document.getElementById("noccopy");

             button.addEventListener("click", function (event) {
                 event.preventDefault();
                 input.select();
                 document.execCommand("copy");
             });
          </script>
        </div>
       </div>
      </div>

将Javascript COPY按钮限制为单个DIV /文本区域

1 个答案: