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=".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>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./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>1 Answer
Reset to default 5I 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.