Dialog content to clipboard

Dialog content to clipboard

Hello,

the below page simply open a jqueryUI-dialog box printing same colored text.
Ideally the "Copy to clipboard" button should make a copy available to user.
Unfortunately leveraging on textarea element and document.execCommand('copy') it only copy the underlying code:
  1. ie: <span style='color:red;'>This is a red text</span><br><span style='color:green;'>This is a green text</span><br><span style='color:blue;'>This is a blue text</span><br>
If instead I press CMD+A, CMD+C then paste with CMD+V I get colored text plus additional unwanted information since CMD+A has selected the entire page.

Does anybody has suggestion on how to color-copy to clipboard only the UI Dialog content ?

Thx!


  1. <!DOCTYPE html>
  2. <html>
  3.  <head>
  4.  </head>
  5.  <body>
  6. <script type="text/javascript" src="https://code.jquery.com/jquery-1.11.3.js"></script>
  7. <script type="text/javascript" src="https://code.jquery.com/ui/1.12.0/jquery-ui.js"></script>
  8. <link rel="stylesheet" href="https://code.jquery.com/ui/1.12.0/themes/base/jquery-ui.css">
  9. <script type="text/javascript">
  10.   function clip(text) {
  11.     var copyElement = document.createElement('textarea');
  12.     copyElement.setAttribute("id", "mytextarea");
  13.     copyElement = document.body.appendChild(copyElement);
  14.     $("#mytextarea").val(text);
  15.     copyElement.select();
  16.     try {
  17.       if(!document.execCommand('copy')) throw 'Not allowed.';
  18.     } catch(e) {
  19.       copyElement.remove();
  20.       console.log("document.execCommand('copy'); is not supported");
  21.       prompt('Copy the text below. (ctrl c, enter)', text);
  22.     } finally {
  23.       if (typeof e == 'undefined') {
  24.         copyElement.remove();
  25.       }
  26.     }
  27.   }
  28.   function to_clip(){
  29.       clip($txt);
  30.   }
  31. $(function(){
  32.       $txt="";
  33.       $txt+="<span style='color:red;'>This is a red text</span><br>";
  34.       $txt+="<span style='color:green;'>This is a green text</span><br>";
  35.       $txt+="<span style='color:blue;'>This is a blue text</span><br>";
  36.       $txt2="<br><input onClick='to_clip();' id='submitbtn' type='submit' value='Copy to clipboard'>";
  37.       var title="Clip-test";
  38.       var mypopup2 = $("<div id='dialog' title='"+title+"'></div>", { css: { 'display': 'none' }});
  39.       mypopup2.html($txt+$txt2);
  40.       mypopup2.dialog({ width: 400, height: 200 });
  41.       $("#dialog").css({"font-size": "11px"});
  42. })
  43. </script>
  44.  Test
  45.  </body>
  46. </html>