我正在创建一个基本的网页表单，我希望将表单填写好后以某种基本格式复制到剪贴板。
例如
使用-在此处复制输入内容的语音
登录-在此处登录复制的输入
h3前往此处h3
摘要-摘要在此处复制了输入
等
目前，我可以使用复制功能，尽管复制的所有内容都在一行中，没有任何格式。
当前格式示例- （在此处使用复制的输入说话）（在此处登录复制的输入）（此处复制的输入摘要）
如何添加类似于第一个示例的格式？
<!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>
答案 0 :(得分：0)
我发现了另一篇类似的帖子here，上面写着this JSFiddle，但我在下面发布了您需要做的事情：
<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>
还有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);
};
请注意，您也可以在这里或在其他网站上进行一些研究，而不必总是问一个问题。