Copying a String to the Clipboard in JavaScript

Using Pure JavaScript

This method copies text from an input form.

    <input type="text" value="Hello." id="myText">
    <button onclick="copyText()">Copy string</button>

  function copyText() {
    var copyText = document.getElementById("myText");
    copyText.select();
    document.execCommand("copy");
    alert("Copied string: " + copyText.value);
  }

Run code

Note: document.execCommand() is not supported in IE9 or earlier.

Using clipboard.js

This section looks at clipboard handling with clipboard.js. The related site is below.

https://clipboardjs.com/

First, add the library. Using a CDN is recommended.

<script src="https://cdnjs.cloudflare.com/ajax/libs/clipboard.js/2.0.0/clipboard.min.js"></script>

Example 1) Input Form Clipboard

<input id="foo" value="http://www.devkuma.com">

<button class="btn" data-clipboard-target="#foo">
    <img src=".btn" alt="Copy to clipboard">
</button>

Run code

Example 2) Text Clipboard

<button class="btn" data-clipboard-text="Hello.">Copy</button>

var clipboard = new ClipboardJS('.btn');
clipboard.on('success', function(e) {
    console.info('Action:', e.action);
    console.info('Text:', e.text);
    console.info('Trigger:', e.trigger);
    alert("Clipboard: " + e.text);
});

clipboard.on('error', function(e) {
    console.error('Action:', e.action);
    console.error('Trigger:', e.trigger);
});

Run code