淘先锋技术网

首页 1 2 3 4 5 6 7

今天我们来学习一下如何使用 jQuery 编写一个点击按钮复制内容的功能。

jquery点击按钮 复制内容

首先我们需要在 HTML 页面中添加一个按钮和要被复制的内容:

<button id="copy-btn">复制</button>
<p id="copy-content">这里是要被复制的内容</p>

然后,我们使用 jQuery 监听按钮的点击事件,当按钮被点击时,获取要被复制的内容,并将其复制到剪切板中:

$('button#copy-btn').click(function() {
  var copyContent = $('p#copy-content').text();
  navigator.clipboard.writeText(copyContent)
    .then(function() {
      console.log('内容已复制到剪切板');
    })
    .catch(function(error) {
      console.error('复制失败:', error);
    });
});

以上代码中的 navigator.clipboard.writeText() 是 HTML5 引入的 API,它可以将指定文本复制到剪切板中。

完成了以上步骤后,当我们点击「复制」按钮时,被复制的内容就会被保存到剪切板中了。