Copy Form to Clipboard with formatting

Question

I am creating a basic webpage form and I would like the form once filled out to copy to the clipboard with some basic formatting.

E.g.

Spoke with - Spoke with copied input here

Logged in - Logged in copied input here

h3 heading here h3

Summary - Summary copied input here

etc

At the current moment I have a copy function working although everything copied is in one line without any formatting.

Example of current format - (Spoke with copied input here) (Logged in copied input here) (Summary copied input here)

How can I add some formatting like the 1st example?

<!DOCTYPE html>
<html lang="en">
 <head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
 </head>
 <body>
  <form id="myForm" action="/action_page.php">
   <h2><img src="Images\LEAP-logo-transparent-RGB.png" alt="LEAP-logo-transparent-RGB" width="420" height="90"></h2>
  <p>
   Spoke With -  
   <input type="text" name="spokewith" id="Input" required="<#CDATA#>" class="input">
  <br>
   Logged in - 
   <input class="input" type="radio" name="loggedin" value="Yes" required="<#CDATA#>"> Yes
   <input class="input" type="radio" name="loggedin" value="No"> No<br>
  </p>
   <h3>Describe the clients Issue</h3>
  <p>
   Summary - 
   <input id="Input" type="text" name="Summary" required="<#CDATA#>" class="input" >
  <br>
   Issue Started Occurring - 
   <input type="date" name="issuedate" required="<#CDATA#>"class="input" >
  <br>
   Number of affected PC's
   <select class="input" id="noPCS" required name="noPCS">
    <option value="">PC's Affected</option>
    <option value="1">1</option>
    <option value="2 - 3">2 - 3</option>
    <option value="3 - 5">3 - 5</option>
    <option value="5 - 10">5 - 10</option>
    <option value="10+">10+</option>
   </select>
  <br>
   Error Message Code (If Any) -
   <input type="text" name="Error" class="input" >
  <br>
   Anything Notable - 
   <input type="text" name="Noteable" class="input" >
  <br>
  </p>
   <h3>System Information</h3>
  <p>
   System Audit Attached - 
   <select required name="Systemaudit" class="input" >
    <option value="">Audit</option>
    <option value="Yes">Yes</option>
    <option value="No">No</option>
   </select>
  <br>
   Leap Server - 
   <select required name="leapserver" class="input" >
    <option value="">Server</option>
    <option value="Live">Live</option>
    <option value="LiveB">LiveB</option>
   </select>
  <br>
   Leap Version - 
   <input type="text" name="leapversion" required="<#CDATA#>" class="input" >
  <br>
   32 or 64 bit - 
   <select required name="architecture" class="input" >
    <option value="">OS Type</option>
    <option value="32bit">32 bit</option>
    <option value="64bit">64 bit</option>
   </select>
  <br>
   Operating System - 
   <select required name="Operatingsystem" class="input" >
    <option value="">OS Version</option>
    <option value="Windows7">Windows 7</option>
    <option value="Windows8">Windows 8</option>
    <option value="Windows8.1">Windows 8.1</option>
    <option value="Windows10">Windows 10</option>
   </select>
  <br>
   MSO Version & Build - 
   <input type="text" name="MSOversion" class="input" >
  <br>
   AntiVirus Installed - 
   <input type="text" name="Antivirus" class="input" >
  </p>
   <h3>Replication/Repoduction Information</h3>
  <p>
   Matter Number - 
   <input type="text" name="matternumber" class="input" >
  <br>
   Precendent code/name - 
   <input type="text" name="precedent" class="input" >
  <br>
   Document Name - 
   <input type="text" name="Documentname" class="input" >
  <br>
   Report Name - 
   <input type="text" name="reportname" class="input" >
  <br>
   Steps to Repoduce or Replicate the issue - <br>
   <textarea name="stepsforissue" class="input" ></textarea>
  </p>
   <h3>What does the issue occur on</h3>
  <p>
   Does the issue occur on LEAP Data - 
   <select required name="Leapdata" class="input" >
    <option value="">Select</option>
    <option value="Yes">Yes</option>
    <option value="No">No</option>
   </select>
  <br>
   Does the issue occur on Client Data - 
   <select required name="Clientdata" name="input" class="input" >
    <option value="">Select</option>
    <option value="Yes">Yes</option>
    <option value="No">No</option>
   </select>
  </p>
   <h3>What action has been taken to resolve the issue</h3>
  <p>
   Steps taken to resolve issue - <br>
   <textarea class="input"  name="input" type="text" id="txt"></textarea>
  </p>
   <h3>Resolution</h3>
  <p>
   Select a resolution - 
   <select required name="resolution" class="input" >
    <option value="">Resolution</option>
    <option value="Closed">Closed</option>
    <option value="Escalated">Escalated</option>
   </select>
  </p>
  <br>
   <input id="copy" type="submit" value="Copy">
   <input type="reset">
  </form>

 <script>
$(document).ready(function(){
  $('#copy').on('click', function(){
    clipBoardValue = '';
    $('#myForm').find('.input').each(function(){
    if($(this).attr('type')== 'radio' ){
      if($(this).is(':checked')){
        clipBoardValue = clipBoardValue + ' ' + $(this).val();
      }
    }else{
      clipBoardValue = clipBoardValue + ' ' +$(this).val();
    }
    });
    console.log(clipBoardValue+ ' copied to clipboard');
    copyToClipboard(clipBoardValue);
    return false;
  });
});

function copyToClipboard(text){
    var tempElement = document.createElement("input");
    document.body.appendChild(tempElement);
    tempElement.setAttribute('value', text);
    tempElement.select();
    document.execCommand("copy");
    document.body.removeChild(tempElement);
    return false;
}
</script>
<script>
$(document).keypress(function() {
    var textarea=$('#txt'); 
    textarea.val(textarea.val().replace(/#auto/g,"Automation Repair steps \n 1. \n 2. \n 3. "));
 textarea.val(textarea.val().replace(/#TS/g,"Timesheet Repair steps \n 1. \n 2. \n 3. ")); 
});
$(document).ready(function(){
  $('#copy').on('click', function(){
    clipBoardValue = '';
    $('#myForm').find('.input').each(function(){
    if($(this).attr('type')== 'radio' ){
      if($(this).is(':checked')){
        clipBoardValue = clipBoardValue + ' ' + $(this).val();
      }
    }else{
      clipBoardValue = clipBoardValue + ' ' +$(this).val();
    }
    });
    console.log(clipBoardValue+ ' copied to clipboard');
    copyToClipboard(clipBoardValue);
    return false;
  });
});
 </script>
 </body>
</html>

score 4 · Answer 1 · answered Sep 04 '18 at 01:22

I found another post here that seems similar, and it says look at this JSFiddle, but I've posted what you ned to do below:

<button onclick="copyToClip(document.getElementById('foo').innerHTML)">
  Copy the stuff
  </button>

<div id=foo style="display:none">
  This is some data that is not visible. 
  You can write some JS to generate this data. 
  It can contain rich stuff.  <b> test </b> me <i> also </i>
  <span style="font: 12px consolas; color: green;">Hello world</span> 
  You can use setData to put TWO COPIES into the same clipboard, 
  one that is plain and one that is rich. 
  That way your users can paste into either a
  <ul>
    <li>plain text editor</li>
    <li>or into a rich text editor</li>
  </ul>
</div>

And the JS:

function copyToClip(str) {
  function listener(e) {
    e.clipboardData.setData("text/html", str);
    e.clipboardData.setData("text/plain", str);
    e.preventDefault();
  }
  document.addEventListener("copy", listener);
  document.execCommand("copy");
  document.removeEventListener("copy", listener);
};

Please note that you can also do some research, either here or on other websites, and you don't have to always ask a question.

If you pass the `str` to text/plain and that's HTML, it's going to be treated as is. You need to pass different content to text/plain (like `element.innerText`) and text/html (like the one you are using for both: `element.innerHTML`). See example: https://codepen.io/brav0/pen/EBWxZJ — Paul Melero, Jun 21 '19 at 08:18

Copy Form to Clipboard with formatting

1 Answers1