Question

我希望能够点击某个div并将其复制到剪贴板，我已经在互联网上搜索了3天，但没有任何效果。举个例子，去HERE。我想点击十六进制代码并将其复制到剪贴板，有人可以帮助我吗？

<html>
<link rel="stylesheet" type="text/css" href="//fonts.googleapis.com/css?family=Quicksand" />

<head>
  <style>
    #text {
      width: 100%;
      height: 700px;
      text-align: center;
      font-size: 50px;
      font-family: 'Quicksand';
    }
    body {
      text-align: center;
      font-family: 'Quicksand';
      margin-top: 0px;
      margin-bottom: 0px;
      margin-left: 0px;
      margin-right: 0px;
    }
  </style>
</head>

<body>
  <h1>Rainbow Hover</h1>
  <h2><strong>Hover over the rainbow to get a random color!</strong></h2>
  <div id="text"></div>
  <script type="text/javascript">
    var div = document.getElementById('text'),
      randomColor = function(e) {
        var hex = Math.floor(Math.random() * 0xFFFFFF),
          res = e.target,
          result = "#" + hex.toString(16);

        res.style.backgroundColor = result;
        res.innerHTML = result;
      };
    div.addEventListener('mouseover', randomColor);
  </script>
</body>

</html>

Answer 1

我假设您只想使用纯JS和HTML（即不使用插件）来实现这一点。以下内容适用于大多数浏览器（我试图模仿您的代码风格，使其更容易跟随）。当然，警报对话框是不必要的。我只是把它们放进去让你看看事情是否按预期工作。

如果您有任何问题，请与我们联系！

P.S。我从这里借用（并略微修改）了selectText函数：Selecting text in an element (akin to highlighting with your mouse)，和copyColor函数来自：How do I copy to the clipboard in JavaScript?。

＆＃13;

<html>
<link rel="stylesheet" type="text/css" href="//fonts.googleapis.com/css?family=Quicksand" />

<head>
  <style>
    #text {
      width: 100%;
      height: 700px;
      text-align: center;
      font-size: 50px;
      font-family: 'Quicksand';
    }
    body {
      text-align: center;
      font-family: 'Quicksand';
      margin-top: 0px;
      margin-bottom: 0px;
      margin-left: 0px;
      margin-right: 0px;
    }
  </style>
</head>
<body>
  <h1>Rainbow Hover</h1>
  <h2><strong>Hover over the rainbow to get a random color!</strong></h2>
  <div id="text"></div>
  <script type="text/javascript">
    var div = document.getElementById('text'),
      randomColor = function(e) {
        var hex = Math.floor(Math.random() * 0xFFFFFF),
          res = e.target,
          result = "#" + hex.toString(16);

        res.style.backgroundColor = result;
        res.innerHTML = result;
      },
      selectText = function (element) {
        var range, selection;    
        if (document.body.createTextRange) {
          range = document.body.createTextRange();
          range.moveToElementText(element);
          range.select();
        } else if (window.getSelection) {
          selection = window.getSelection();        
          range = document.createRange();
          range.selectNodeContents(element);
          selection.removeAllRanges();
          selection.addRange(range);
        }
      },
      copyColor = function(e) {
        var copyTextDiv = e.target;
        selectText(copyTextDiv);

        try {
          var copied = document.execCommand('copy');
          var msg = copied ? 'successful.' : 'unsuccessful.';
          alert('Color copy ' + msg);
        } catch (err) {
          console.log('Unable to copy on this browser.');
        }            
      };
    div.addEventListener('mouseover', randomColor);
    div.addEventListener('click', copyColor);
  </script>
</body>
</html>

＆＃13;

Answer 2

在浏览器中复制到剪贴板一直是个问题，需要解决方法，因为从网站读取和覆盖剪贴板内容可能是一个安全问题。

除此之外，还有现代的跨浏览器剪贴板解决方案，最好的是http://clipboardjs.com。

它描述了那里的用法，它非常简单。如果您遇到问题，请告诉我们您的代码并告诉我们您不理解的内容。

Answer 3

您可以使用ClipboardJS。

要使用“onclick事件”复制文本，您必须按如下方式初始化插件：

<div class='your-div'>
   Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas ultrices erat ultricies euismod consequat. Duis tincidunt vestibulum nibh, non ornare eros lobortis at. In condimentum dapibus nibh, sit amet suscipit nunc vulputate at. Aliquam quis est ac magna vehicula iaculis.
</div>

<script>
new Clipboard('.your-div');
</script>

在HTML和JS中制作复制按钮

3 个答案: