如何在单击按钮时复制输入文本？答案

【问题标题】：How to copy the input text on button click?如何在单击按钮时复制输入文本？
【发布时间】：2022-09-27 14:43:23
【问题描述】：

当用户单击按钮时，我希望复制输入中写入的文本。我该怎么做？

这是我的 HTML 结构：

<!DOCTYPE html>
<html lang=\"en\">
<head>
    <meta charset=\"UTF-8\">
    <meta http-equiv=\"X-UA-Compatible\" content=\"IE=edge\">
    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">
    <title>2b2tyoung.tk</title>

    <link rel=\"stylesheet\" href=\"style.css\">
    <script src=\"main.js\"></script>
</head>
<body>
    <div class=\"container\">
        <div label>
            Join server 
        </div>
        <div class=\"copy-text\">
            <input type=\"text\" class=\"text\" value=\"2b2tyoung.tk\">
            <button>
                <i class=\"fa fa-clone\"></i>
            </button>
        </div>
    </div>
</body>
</html>

人们希望看到您尝试过的内容，因此请不要犹豫，通过编辑您的问题来添加您应该复制文本的代码。

标签： javascript html css

【解决方案1】：

这里我选择了fa-clone 图标，在点击时添加了一个监听器，然后我复制了输入的值。

document.querySelector(".fa-clone").addEventListener("click", () => {
  let input = document.querySelector(".copy-text input");
  navigator.clipboard.writeText(input.value);
  console.log("copied "+input.value)
})

<div class="copy-text">
  <input type="text" class="text" value="2b2tyoung.tk">
  <button>
    <i class="fa fa-clone">Clone</i>
  </button>
</div>

【讨论】：