不依赖Flash和任何JS库实现文本复制与剪切附源码下载

2023年6月11日上午4:31 • JavaScript

实现文本复制和剪切可以简单地使用 JavaScript 的 execCommand() 方法，但该方法在一些最新的浏览器中已被废弃或不再可用。因此，我们需要一种新的方法来实现这个功能，而且不仅能够解决浏览器兼容性问题，还要避免依赖第三方库。下面是一个完整的攻略。

步骤 1：创建 HTML 页面

创建一个 HTML 页面，并在页面中添加一个文本输入框和复制和剪切按钮。例如：

<input type="text" id="myInput" value="Hello, World!">
<button onclick="copyText()">复制</button>
<button onclick="cutText()">剪切</button>

需要注意的是，要使用 id 属性为文本输入框添加一个唯一的标识符，以便稍后在 JavaScript 中引用它。

步骤 2：编写复制和剪切的 JavaScript 函数

下面是为复制和剪切按钮编写的 JavaScript 函数的完整代码示例：

function copyText() {
  var input = document.getElementById("myInput");
  input.select();
  document.execCommand("copy");
  alert("已复制到剪贴板");
}

function cutText() {
  var input = document.getElementById("myInput");
  input.select();
  document.execCommand("cut");
  alert("已剪切到剪贴板");
}

这些函数的工作原理如下：

首先，使用 DOM 中的 getElementById() 方法获取文本输入框，该方法使用在第一步中定义的 ID 选择器。
接下来，使用 select() 方法选择文本输入框中的文本。
最后，使用 document.execCommand() 方法执行复制或剪切操作。

步骤 3：测试

现在，您可以在浏览器中打开 HTML 文件并测试您的复制和剪切按钮。如果一切顺利，您应该能够将文本复制或剪切到剪贴板中。

示例 1

下面是一个使用上述代码的简单示例：

<!DOCTYPE html>
<html>
  <body>

    <h2>点击按钮复制或剪切文本到剪贴板</h2>

    <input type="text" id="myInput" value="Hello, World!">

    <button onclick="copyText()">复制</button>
    <button onclick="cutText()">剪切</button>

    <script>
      function copyText() {
        var input = document.getElementById("myInput");
        input.select();
        document.execCommand("copy");
        alert("已复制到剪贴板");
      }

      function cutText() {
        var input = document.getElementById("myInput");
        input.select();
        document.execCommand("cut");
        alert("已剪切到剪贴板");
      }
    </script>

  </body>
</html>

示例 2

下面是一个将复制和剪切功能添加到现有 HTML 表格的示例：

<!DOCTYPE html>
<html>
  <body>

    <h2>点击表格单元格将其复制或剪切到剪贴板</h2>

    <table>
      <tr>
        <td onclick="copyText(this)">Copy me!</td>
        <td onclick="cutText(this)">Cut me!</td>
      </tr>
    </table>

    <script>
      function copyText(element) {
        var input = document.createElement("input");
        input.setAttribute("value", element.innerHTML);
        document.body.appendChild(input);
        input.select();
        document.execCommand("copy");
        document.body.removeChild(input);
        alert("已复制到剪贴板");
      }

      function cutText(element) {
        var input = document.createElement("input");
        input.setAttribute("value", element.innerHTML);
        document.body.appendChild(input);
        input.select();
        document.execCommand("cut");
        document.body.removeChild(input);
        alert("已剪切到剪贴板");
      }
    </script>

  </body>
</html>

尝试在表格单元格上单击，看看是否可以将其复制或剪切到剪贴板中。注意：此示例创建了一个新的输入元素，以将剪贴板中的文本设置为输入元素的值，然后再将其删除。

本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：不依赖Flash和任何JS库实现文本复制与剪切附源码下载 - Python技术站