Languages
[Edit]
EN

JavaScript - how to copy text to system clipboard?

9 points
Created by:
Kate_C
2857

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>

 

Hey ūüĎč
Would you like to know what we do?
  • Dirask is a friendly IT community for learners, professionals and hobbyists to share their knowledge and help each other in extraordinary easy way.
  • We welcome everyone,
    no matter what the experience,
    no matter how basic the question is,
    this community will help you.