📌  相关文章
📜  如何通过按钮单击 js 从输入中复制文本 - Javascript (1)

📅  最后修改于: 2023-12-03 15:38:56.643000             🧑  作者: Mango

如何通过按钮单击 js 从输入中复制文本 - Javascript

在Web开发中，我们经常需要让用户将一些输入的信息复制到剪贴板中，以方便用户在其他地方粘贴使用。

本文将介绍如何通过按钮单击事件，使用Javascript从输入框中复制文本到剪贴板中。

HTML代码

首先，我们需要编写一个HTML代码，包含一个文本框和一个按钮，如下所示：

<input type="text" id="inputText" value="Hello World!">
<button id="copyButton" onclick="copyToClipboard()">Copy to Clipboard</button>

其中，文本框的id为inputText，初始值为Hello World!；按钮的id为copyButton，并绑定onclick事件，当点击按钮时调用Javascript函数copyToClipboard()。

Javascript代码

接下来，我们需要编写Javascript代码，实现复制文本到剪贴板的功能。

function copyToClipboard() {
  var inputText = document.getElementById("inputText");
  inputText.select();
  document.execCommand("copy");
}

代码分为两部分：

  • var inputText = document.getElementById("inputText"); 获取输入框的DOM对象。
  • inputText.select(); document.execCommand("copy"); 将文本框中的文本选中，并执行copy命令将选中的文本复制到剪贴板中。
完整代码
<!DOCTYPE html>
<html>
<head>
  <title>Copy Text to Clipboard using Javascript</title>
</head>
<body>

  <input type="text" id="inputText" value="Hello World!">
  <button id="copyButton" onclick="copyToClipboard()">Copy to Clipboard</button>

  <script>
    function copyToClipboard() {
      var inputText = document.getElementById("inputText");
      inputText.select();
      document.execCommand("copy");

      // 显示提示信息
      var tooltip = document.getElementById("tooltip");
      tooltip.innerHTML = "Copied: " + inputText.value;
    }
  </script>

  <!--用于显示复制状态的提示-->
  <div id="tooltip"></div>

</body>
</html>

完整代码包括HTML和Javascript代码，并添加了显示复制状态的提示<div>元素。

总结

本文介绍了如何通过按钮单击事件，使用Javascript从输入框中复制文本到剪贴板中。通过document.execCommand("copy")命令，我们可以简单地实现该功能，并为用户提供了方便实用的体验。