html 使用JavaScript复制到JavaScript：多个输入值，但只有一个函数？

o3imoua4 于 2023-11-15 发布在 Java

关注(0)|答案(2)|浏览(114)

我试图创建一个小的（本地）页面，允许我通过点击按钮将常用文本复制到剪贴板。
我的代码（见下文）到目前为止工作。
我的问题是：
有没有一种方法可以调整JavaScript代码，这样我就不必为每个新字段（有非常非常多的字段）创建自己的/新的Javascript函数，并且永远不必再次调整Javascript代码？

<html>
    <head>
        <title>Copy!</title>
        <script>
            function c1() {
                var c = document.getElementById("c1");
                navigator.clipboard.writeText(c.value);
            }
            function c2() {
                var c = document.getElementById("c2");
                navigator.clipboard.writeText(c.value);
            }
        </script>
    </head>
    <body>
        <span>
            I want to be copied!<br />
            <input type="text" value="First value to be copied" id="c1"> <button onclick="c1()">Copy the first value!</button>
        </span>
        <br /><br />
        <span>
            But I also want to be copied<br />
            <input type="text" value="And the second value" id="c2"> <button onclick="c2()">And now the second!</button>
        </span>
    </body>
</html>

字符串

Html

来源：https://stackoverflow.com/questions/77433502/copy-to-clipboard-using-javascript-multiple-input-values-but-one-function

2条答案

按热度按时间

5anewei61#

首先，在“copyable”区域中添加一个事件监听器。点击时，检查点击的目标是一个按钮，或者它有一个按钮作为其父按钮（以确保我们在按钮中包含文本）。如果我们在按钮中点击，获取它的前一个元素兄弟，输入并将其值复制到剪贴板。

document.querySelector("div#copyable").addEventListener(
    "click",
  function(e) {
    const theButton = e.target.closest("button");
    if (theButton) {
        const theText = theButton.previousElementSibling.value;
      navigator.clipboard.writeText(theText);
      console.log("now try pasting somewhere")
    }
    
  }
 )

个字符

赞(0）回复(0）举报 2023-11-15

wgeznvg72#

编辑的解决方案。我相信会有一个更好的方法来做到这一点。但这段代码现在工作。

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Copy To Clipboard</title>
  </head>
  <body>

    <!-- Text 1 -->
    <form class="copyText">
      <input type="text" />
      <button>Copy Text</button>
    </form>

    <!-- Text 2 -->
    <form class="copyText">
      <input type="text" />
      <button>Copy Text</button>
    </form>

    <!-- JavaScript -->
    <script>
      const copyText = document.getElementsByClassName("copyText");

      for(let i = 0; i < copyText.length; i++) {
        copyText[i].addEventListener('submit', function(e) {

          // Prevent Default (It's required)
          e.preventDefault()

          // In my case 0 element is input
          navigator.clipboard.writeText(e.target.children[0].value)
        })
      }

    </script>
  </body>
</html>

字符串

赞(0）回复(0）举报 2023-11-15

我来回答

html 使用JavaScript复制到JavaScript：多个输入值，但只有一个函数？

2条答案

相关问题

热门标签

最新问答