How to copy the innerHtml results using copy button

Question

After click on submit button I get the result in innerhtml. I need to copy the results using the copy button. Please help me out.... Script mentioned below :enter link description here

<!DOCTYPE html>
<html>
  <head>
    <base target="_top">
    <style>
      .form-row{
        margin-bottom:18px;
      } 
      div {
        background-color: lightblue;
        width: 650px;
        padding: 35px;
      }
    <!--<div> I don't think  that you really want this here -->
    </style>
</head>
    <body>
      <script type="text/javascript">
          function getDisplay(){
            var items=document.getElementsByName('acs');
            var selectedItems="";
            for(var i=0; i<items.length; i++){
                if(items[i].type=='checkbox' && items[i].checked==true)
                   selectedItems+=items[i].value+"\n";
            }
            document.getElementById("display").innerHTML = "Valid ID,POA docs received, "+"Profile Edited :"+selectedItems+", releasing.";
          }
          function getclear(){
              document.getElementById("display").innerHTML = "";
              var items = document.getElementsByName('acs');
              for (var i = 0; i < items.length; i++) {
                  if (items[i].type == 'checkbox') items[i].checked = false;
              }
          }
      </script> 
    <div id="whole">
      <font size="4">Profile Edited :</font>
    <p>
      <input type="checkbox" name="acs"  value="Name" style="height:18px; width:18px;" ><font size="3"> Name</font>
      <input type="checkbox" name="acs" value="Address" style="height:18px; width:18px;"><font size="3"> Address</font>
      <input type="checkbox" name="acs" value="DOB" style="height:18px; width:18px;"><font size="3"> DOB</font>
      <input type="checkbox" name="acs" value="No" style="height:18px; width:18px;"><font size="3"> No</font>
    </p>
    <p>
      <button onclick="getDisplay();" style="height:30px; width:100px"  >Submit</button>   
      <button onclick="getclear();" style=" height:30px; width:100px" >Clear</button>
      <button onclick="getCopy();" style=" height:30px; width:100px" >Copy</button>
    </p>
    </div>
    <font size="5">Notes:</font>
    <div id="display"></div>  
  </body>
</html>

I am not able to my script in this so I have given script link. If does not have access let me know — Nagaraj Shet, Dec 09 '19 at 16:33
Innerhtml I get the results when click on submit button. After if I click "Copy" I should copy the innerhtml results. — Nagaraj Shet, Dec 09 '19 at 16:50

Suzette Buxmann · Answer 1 · 2019-12-09T17:50:27.720

0

Ok, I think this is what you want...

Javascript:

    function copyToClipboard() {
document.querySelector('#display').select();
document.execCommand('copy');
}

And I couldn't figure out how to take it from anything but an input, so if you do this, and then style the input with no borders so it doesn't look like an input...

<button id="copyToClipboard" onclick="copyToClipboard()" style=" height:30px; width:100px" >Copy</button>
<input id = "display" name="exampleClipboard"  style="width:500px; border: none;" type="text">

edited Dec 09 '19 at 17:50

answered Dec 09 '19 at 17:05

Suzette Buxmann

133
5

Input text I am able to copy but actually I need without input whatever result come in html that needs to get copy. – Nagaraj Shet Dec 09 '19 at 18:31
I found this one on stackoverflow: https://stackoverflow.com/questions/36639681/how-to-copy-text-from-a-div-to-clipboard/51261023 – Suzette Buxmann Dec 09 '19 at 18:58
1

Its working fine for me. I have made some changes in the script as per the input. Thank you all for your quick response and to resolve this issue – Nagaraj Shet Dec 10 '19 at 12:43

Cooper · Answer 2 · 2019-12-09T19:29:03.697

I played around with the first answer and couldn't get it to work for me either. So I tried it this way. Note: I'm giving you a function that creates a dialog for testing. The actual function is shown below. But I switched to a textarea instead of a div which may not be quite what you want.

function innerHtmlTest() {
  var html='<textarea rows="2" cols="40" id="display" style="border:none;">This is just a text string.</textarea>';
  html+='<br /><input type="button" value="Copy" onClick="getHtml();" />';
  html+='<br /><textarea rows="2" cols="40" id="dsply" placeholder="Paste Here"></textarea>';
  html+='<script>function getHtml(){ document.getElementById("dsply").select();document.execCommand("copy");}</script>';
  var userInterface=HtmlService.createHtmlOutput(html);
  SpreadsheetApp.getUi().showModelessDialog(userInterface, "Copy");
}

function getHtml(){ 
  document.getElementById("display").select();
  document.execCommand("copy");
}

So perhaps you would like to change to a text area instead of a div. I use this technique with text boxes a lot but never tried it before with a div.

score 0 · Accepted Answer · answered Dec 10 '19 at 12:43

It is a bit tricky, because as it is not a TextElement you can not select() it as a text.

So what we do here is to get the innerText of the div element, then we create a Textarea element an we append the value, then we can select() it and copy it to the clipboard, here you have the working code:

<!DOCTYPE html>
<html>
  <head>
    <base target="_top">
    <style>
      .form-row{
        margin-bottom:18px;
      } 
      div {
        background-color: lightblue;
        width: 650px;
        padding: 35px;
      }
    <!--<div> I don't think  that you really want this here -->
    </style>
</head>
    <body>
      <script type="text/javascript">
          function getDisplay(){
            var items=document.getElementsByName('acs');
            var selectedItems="";
            for(var i=0; i<items.length; i++){
                if(items[i].type=='checkbox' && items[i].checked==true)
                   selectedItems+=items[i].value+"\n";
            }
            document.getElementById("display").innerHTML = "Valid ID,POA docs received, "+"Profile Edited :"+selectedItems+", releasing.";
          }
          function getclear(){
              document.getElementById("display").innerHTML = "";
              var items = document.getElementsByName('acs');
              for (var i = 0; i < items.length; i++) {
                  if (items[i].type == 'checkbox') items[i].checked = false;
              }
          }
          function copyToClipBoard() {
            var str = document.getElementById('display').innerText;
            var el = document.createElement('textarea');
            el.value = str;
            document.body.appendChild(el);
            el.select();
            document.execCommand('copy');
            document.body.removeChild(el);
          };
      </script> 


    <div id="whole">
      <font size="4">Profile Edited :</font>
    <p>
      <input type="checkbox" name="acs"  value="Name" style="height:18px; width:18px;" ><font size="3"> Name</font>
      <input type="checkbox" name="acs" value="Address" style="height:18px; width:18px;"><font size="3"> Address</font>
      <input type="checkbox" name="acs" value="DOB" style="height:18px; width:18px;"><font size="3"> DOB</font>
      <input type="checkbox" name="acs" value="No" style="height:18px; width:18px;"><font size="3"> No</font>
    </p>
    <p>
      <button onclick="getDisplay();" style="height:30px; width:100px"  >Submit</button>   
      <button onclick="getclear();" style=" height:30px; width:100px" >Clear</button>
      <button onclick="copyToClipBoard();" style=" height:30px; width:100px" >Copy</button>
    </p>
    </div>
    <font size="5">Notes:</font>
    <div id="display"></div>  
  </body>
</html>

How to copy the innerHtml results using copy button

3 Answers3