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
– NewToJS, Commented Dec 10, 2016 at 16:02
@JonesVinothJoseph I tried that but I don't know how to use it — ca1c
– ca1c, Commented Dec 10, 2016 at 16:08
Take a look at this: stackoverflow.com/questions/22581345/… — Julian
– Julian, Commented Dec 10, 2016 at 16:14

Community · Accepted Answer · 2017-05-23 12:08:58Z

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>

NikxDa · Accepted Answer · 2016-12-10 16:12:13Z

0

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.

answered Dec 10, 2016 at 16:12

NikxDa

4,1951 gold badge30 silver badges49 bronze badges

Comments

Edgar Alfonso · Accepted Answer · 2016-12-10 16:25:18Z

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, 2016 at 16:25

answered Dec 10, 2016 at 16:13

Edgar Alfonso

6852 gold badges8 silver badges21 bronze badges

1 Comment

NikxDa Over a year ago

It is not a jQuery plugin. Not everything is a jQuery plugin.

Collectives™ on Stack Overflow

Making Copy Button in HTML and JS

3 Answers 3

Comments

Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related