SO44602815

<!DOCTYPE html>
<html>

<head>
  <style>
    body {
      font: 400 16px/1.428 Consolas;
    }
    /* This is just to make the console
    || display data that needs no horizontal 
    || scrolling to read.
    */
    
    .as-console {
      word-break: break-word;
    }
    
    button {
      margin-left: 18ch;
    }
  </style>
</head>

<body>
  <ol>
    <li>Enter text with line breaks.</li>
    <li>Click the <kbd>DONE</kbd> button</li>
    <li>Open a text editor (like Notepad)</li>
    <li>Paste into the text editor</li>
  </ol>

    <textarea id='TA'></textarea>
    <br/>
    <button>DONE</button>
    <br/>

  <!-- Results pane console output; see http://meta.stackexchange.com/a/242491 -->
  <!-- <script src="http://gh-canon.github.io/stack-snippet-console/console.min.js"></script> -->
  <script>
    // Reference the <textarea>
    var TA = document.getElementById('TA');

    /* Register #TA to the change event
    || After the user has typed in #TA
    || and then clicks elsewhere 
    || (like the inert <button>)... 
    */
    TA.addEventListener('change', function(e) {
      
      /* ... the callback function is invoked and
      || the value of the changed element
      || (i.e. e.target = #TA) is passed thru.
      */
      copyTextToClipboard(e.target.value);
    });

    // Define callback function
    function copyTextToClipboard(text) {

      // Create a <textarea>
      var textArea = document.createElement('textarea');
      // Hide new <textarea>
      textArea.style.opacity = 0;

      // Append new <textarea> to the <form>
      document.body.appendChild(textArea);

      /* Wrap the data in backticks:` 
      || (key is top left corner of keyboard)
      || and the variable of data in a dollar
      || sign and curly brackets: ${}
      || The data (a string), is now an 
      || ES6 template literal.
      */
      var str = `${text}`;

      // Assign the new <textArea> value to str
      textArea.value = str;

      /* .select() method gets the content of
      || new <textarea>
      */
      textArea.select();

      /* copy the selected text to the OS
      || clipboard.
      */
      document.execCommand('copy');

      //console.log(str);
    }
  </script>
</body>

</html>