Making Copy Button in HTML and JS

Question

I want to be able to click on a certain div and it copies it to the clipboard, I have searched all over the internet for 3 days and nothing has worked. To have an example, go HERE. I want to click on the hex code and copy it to the clipboard, can somebody help me?

<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>

Please include the relevant source code to your question and explain what you have tried. — NewToJS, Dec 10 '16 at 16:02
@JonesVinothJoseph I tried that but I don't know how to use it — ca1c, Dec 10 '16 at 16:08
Take a look at this: http://stackoverflow.com/questions/22581345/click-button-copy-to-clipboard-using-jquery — Julian, Dec 10 '16 at 16:14

score 1 · Accepted Answer · edited May 23 '17 at 12:08

I'm assuming you want to do this with just pure JS and HTML (that is, without the use of plugins). The following should work for most browsers (I've tried to mimic your code style to make it more easily followable). Of course, the alert dialogs aren't necessary. I just put them in to let you see if things are working as intended.

Let me know if you have any issues!

P.S. I borrowed (and slightly modified) the selectText function from here: Selecting text in an element (akin to highlighting with your mouse), and the copyColor function from here: How do I copy to the clipboard in JavaScript?.

<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>

score 0 · Answer 2 · answered Dec 10 '16 at 16:12

Copying to the clipboard in browsers has always been a problem and needs workarounds, because it might be a security issue to read and overwrite the clipboard contents from a website.

Aside from that, there are modern cross-browser clipboard solutions available, the by far best being http://clipboardjs.com.

It describes the usage right there and it's pretty much straight-forward. Should you have problems with it, show us your code and tell us what it is that you do not understand.

Edgar Alfonso · Answer 3 · 2016-12-10T16:25:18.223

0

You can use ClipboardJS.

In order to copy text with "onclick event", you have to initialize the plugin as following:

<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>

edited Dec 10 '16 at 16:25

answered Dec 10 '16 at 16:13

Edgar Alfonso

675
2
6
20

1

It is not a jQuery plugin. Not everything is a jQuery plugin. – NikxDa Dec 10 '16 at 16:18

Making Copy Button in HTML and JS

3 Answers3