Copy to clipboard for basic html

Question

I am new to programming and I have basic HTML skills. I am creating a basic web site and I have information in a paragraph and the information is separated by <br> tags. I am looking to add a "copy to clipboard" button and function so that the 16 lines of information are saved to the clipboard.

<p>
this is the 1st line<br>
this is the 2nd line<br>
...
this is the 16th line [copy to clipboard]
<p>

So what have you tried so far, and where did you get stuck? Also, see the "related" section over there on the right? Have you tried any of those answers? — j08691, Sep 26 '15 at 21:17
I remember trying this before but could not find a solution using JS. You need to use flash — Jackson, Sep 26 '15 at 21:18
Flash may not be best going forward since support for it is dropping due to all the security issues. — Jason W, Sep 26 '15 at 21:24
Thank you j08691. I tried the solution given by http://davidwalsh.name/clipboard..and I watched and tried to copy https://www.youtube.com/watch?v=xH_ZV0h4iYU...I appreciate your assistance. — blueDog, Sep 27 '15 at 13:02
Thank you j08691. I see the function copytoclipboard on several sites and I would like to be able to place my 16 lines of data in the clipboard...I do excel and some vba but I am new to Html and web languages. I appreciate any assistance. — blueDog, Sep 27 '15 at 13:10

score 0 · Accepted Answer · answered Sep 27 '15 at 19:38

In browsers that support document.execCommand('copy') and document.execCommand('cut'), copying to the clipboard is very simple; you just do something like this:

var copyBtn = document.querySelector('#copy_btn');
copyBtn.addEventListener('click', function () {
  var urlField = document.querySelector('#url_field');
  // select the contents
  urlField.select();     
  document.execCommand('copy'); // or 'cut'
}, false);

<input id="url_field" type="url" value="http://stackoverflow.com/questions/32802082/copy-to-clipboard-for-basic-html">
<input id="copy_btn" type="button" value="copy">

The above is cribbed straight from JavaScript Copy to ClipBoard (without Flash) using Cut and Copy Commands with document.execCommand().

If you press Run code snippet above the press the copy, you’ll see that takes the URL in the input field there (the URL for this StackOverflow question), and copies it to your clipboard.

Copy to clipboard for basic html

1 Answers1