css 怎么一键复制文字

CSS 是一种用于网页设计的语言，它不仅可以让我们的网页看起来更加美观，而且还可以增强网站的交互性。

在网页设计中，经常会遇到需要用户一键复制文字的情况。这时候，我们可以使用 CSS 来实现这个功能。具体实现方法如下：

/*先定义一个复制按钮样式*/.copy-btn {
      cursor: pointer;
      background-color: #4CAF50;
      color: white;
      border: none;
      padding: 10px 20px;
      text-align: center;
      text-decoration: none;
      display: inline-block;
      font-size: 16px;
      border-radius: 5px;
}
/*然后用 JavaScript 给按钮添加点击事件，并通过 navigator.clipboard.writeText() 方法将文本内容复制到剪贴板*/document.querySelector('.copy-btn').addEventListener('click', function() {
      navigator.clipboard.writeText(document.querySelector('.text').textContent);
      alert('已复制到剪贴板！');
}
    );
    

在上面的代码中，我们定义了一个叫 .copy-btn 的样式，这个样式将作为复制按钮的样式。在 JavaScript 中，我们给按钮添加了一个点击事件。在点击事件中，我们使用 navigator.clipboard.writeText() 方法将文本内容复制到剪贴板。需要复制的文本内容通过 document.querySelector('.text').textContent 获取。

最后，我们只需要在需要进行复制的地方添加一个 class 为 .text 的标签，再添加一个 class 为 .copy-btn 的按钮即可实现一键复制文本的功能。

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！