Top community members
All Wiki Articles Create Wiki Article

In the past we had a dream,
to have place where we could share IT knowledge,
to ask questions without fear that someone will judge us.

Now we are a group of people who make this dream come true. ‚̧ ūüíĽ

If you think sharing knowledge and helping other is valuable.

join our community - Click here

JavaScript - how to copy text to system clipboard?

0 contributions
9 points

In JavaScript it is possible to copy text to system clipboard in following way.

1. Custom copy text to system clipboard method example

// ONLINE-RUNNER:browser;

<!doctype html>
<html>
<head>
  <script>

	function Clipboard() {
        if (document.body == null) {
            throw new Error('<body> element has not been created yet.');
        }

        var self = this;

        var element = document.createElement('textarea');
      	
      	element.setAttribute('style',
        	'border: none;width: 0px; height: 0px; display: none');
        
      	document.body.appendChild(element);

        self.copy = function(text) {
            element.value = text;
            element.style.display = 'block';

          	element.select();
          	document.execCommand('copy');

            element.style.display = 'none';
        };
    };

  </script>
</head>
<body>
  <script>
	var clipboard = new Clipboard();
  </script>
  
  <button onclick="clipboard.copy('Hello Dirask!')">
    Copy to clipboard: 'Hello Dirask!'.
  </button>
  
  <br /><br />
  
  <button onclick="clipboard.copy('My name is John')">
    Copy to clipboard: 'My name is John'.
  </button>
  
  <br /><br />
  <input type="text" style="padding: 20px; width: 300px;" 
         placeholder="You can paste content of your clipboard here :)" />
</body>
</html>

Explanation:

  • textarea element has been used because¬†of new line characters support and not formatted content,
  • textarea element has been set to 0x0 px to make it invisible for user during copy operation - to prevent flickering,
  • to make text copy some simple hacks are¬†necessary:
    • text should be put inside text field,
    • it is possible to make text copy only if text field is visible - because of security reasons - this is why element visibility¬†is changed to visible during the operation,
    • to make copy it is necessary to select copied text before the operation.

Note: after click on 'Copy to clipboard...' button you can paste text to some plase.

2. Clipboard singleton class example

// ONLINE-RUNNER:browser;

<!doctype html>
<html>
<head>
  <script>

    window.Clipboard = new function() {
      var self = this;

      var transit = null;
      var element = null;

      window.addEventListener('load', function() {
        element = document.createElement('textarea');

        element.setAttribute('style',
            'border: none;width: 0px; height: 0px; display: none');

        document.body.appendChild(element);

        if(transit)
          copy(transit);
      });

      function copy(text) {
        element.value = text;
        element.style.display = 'block';

        element.select();
        document.execCommand('copy');

        element.style.display = 'none';
      }

      self.copy = function(text) {
        if(element) {
          if (element.parentNode == null) {
            throw new Error('Element has not been removed from document.');
          }

          copy(text);
        } else {
          transit = text;
        }
      };
    };

  </script>
  
</head>
<body>

  <button onclick="Clipboard.copy('Hello Dirask!')">
    Copy to clipboard: 'Hello Dirask!'.
  </button>
  
  <br /><br />
  
  <button onclick="Clipboard.copy('My name is John')">
    Copy to clipboard: 'My name is John'.
  </button>
  
  <br /><br />
  <input type="text" style="padding: 20px; width: 300px;" 
         placeholder="You can paste content of your clipboard here :)" />
</body>
</html>

3. navigator.clipboard object example

This API has working draft status and is not supported by all web browsers.

More informations about the API are available here.

// ONLINE-RUNNER:browser;

<!doctype html>
<html>
<body>

  <button onclick="navigator.clipboard.writeText('Hello Dirask!')">
    Copy to clipboard: 'Hello Dirask!'.
  </button>
  
  <br /><br />
  
  <button onclick="navigator.clipboard.writeText('My name is John')">
    Copy to clipboard: 'My name is John'.
  </button>
  
  <br /><br />
  <input type="text" style="padding: 20px; width: 300px;" 
         placeholder="You can paste content of your clipboard here :)" />
</body>
</html>

 

0 contributions

Checkout latest Findings & News:

Checkout latest questions:

Checkout latest wiki articles:

Hey ūüĎč
Would you like to know what we do?
  • Dirask is IT community, where we share coding knowledge and help each other to solve coding problems.
  • We welcome everyone,
    no matter what the experience,
    no matter how basic the question is,
    this community will help you.
Read more