在 jquery 中单击按钮时复制文本

📌 相关文章

📜 在 jquery 中单击按钮时复制文本 - Javascript (1)

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

在前端开发中，经常需要实现点击按钮复制文本的功能，这里介绍一种基于 Jquery 的实现方式。

HTML 代码

首先需要在 HTML 中添加一个按钮和文本框，如下所示：

<input id="copy-text" type="text" value="Hello, world!">
<button id="copy-btn" type="button">复制</button>

Jquery 代码

接下来使用 Jquery 来实现点击按钮复制文本的功能。首先需要检查当前浏览器是否支持 Clipboard API，代码如下：

function copyToClipboard(text) {
  if (!navigator.clipboard) {
    // Clipboard API not supported
    return false;
  }

  navigator.clipboard.writeText(text).then(function() {
    console.log('Text copied to clipboard');
  }, function() {
    console.error('Failed to copy text to clipboard');
  });
}

如果当前浏览器不支持 Clipboard API，可以尝试使用 document.execCommand() 来实现复制功能。代码如下：

function fallbackCopyTextToClipboard(text) {
  var textArea = document.createElement("textarea");
  textArea.value = text;

  // Avoid scrolling to bottom
  textArea.style.top = "0";
  textArea.style.left = "0";
  textArea.style.position = "fixed";

  document.body.appendChild(textArea);
  textArea.focus();
  textArea.select();

  try {
    var successful = document.execCommand('copy');
    var msg = successful ? 'successful' : 'unsuccessful';
    console.log('Fallback: Copying text command was ' + msg);
  } catch (err) {
    console.error('Fallback: Oops, unable to copy', err);
  }

  document.body.removeChild(textArea);
}

最后，在按钮的 click 事件中调用上述函数即可实现复制文本的功能。

$('#copy-btn').click(function() {
  var text = $('#copy-text').val();
  copyToClipboard(text) || fallbackCopyTextToClipboard(text);
});

效果演示

点击按钮时，文本框中的内容被复制到了剪贴板中。

完整代码如下所示：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Copy Text with Jquery</title>
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
  <script>
    function copyToClipboard(text) {
      if (!navigator.clipboard) {
        // Clipboard API not supported
        return false;
      }

      navigator.clipboard.writeText(text).then(function() {
        console.log('Text copied to clipboard');
      }, function() {
        console.error('Failed to copy text to clipboard');
      });
    }

    function fallbackCopyTextToClipboard(text) {
      var textArea = document.createElement("textarea");
      textArea.value = text;

      // Avoid scrolling to bottom
      textArea.style.top = "0";
      textArea.style.left = "0";
      textArea.style.position = "fixed";

      document.body.appendChild(textArea);
      textArea.focus();
      textArea.select();

      try {
        var successful = document.execCommand('copy');
        var msg = successful ? 'successful' : 'unsuccessful';
        console.log('Fallback: Copying text command was ' + msg);
      } catch (err) {
        console.error('Fallback: Oops, unable to copy', err);
      }

      document.body.removeChild(textArea);
    }

    $(document).ready(function() {
      $('#copy-btn').click(function() {
        var text = $('#copy-text').val();
        copyToClipboard(text) || fallbackCopyTextToClipboard(text);
      });
    });
  </script>
</head>
<body>
  <input id="copy-text" type="text" value="Hello, world!">
  <button id="copy-btn" type="button">复制</button>
</body>
</html>

以上代码返回的markdown格式如下：

# 在 Jquery 中单击按钮时复制文本

在前端开发中，经常需要实现点击按钮复制文本的功能，这里介绍一种基于 Jquery 的实现方式。

## HTML 代码

首先需要在 HTML 中添加一个按钮和文本框，如下所示：

```html
<input id="copy-text" type="text" value="Hello, world!">
<button id="copy-btn" type="button">复制</button>