如何将表单复制到剪贴板HTML？
如何将表单复制到剪贴板HTML？
提问于 2018-08-13 04:43:25
我试图创建一个简单的表单，一旦填写，就会将输入的文本和表单中选择的选项复制到剪贴板上。我已经列出了一个基本的表单作为一个例子，其中包含一个提交按钮，其值为“Copy”(暂时)。
代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Template</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
.Shorttextbox {
padding: 3px 5px;
margin: 2px 0;
box-sizing: border-box;
}
input[type=date] {
padding: 3px 5px;
margin: 2px 0;
box-sizing: border-box;
}
select {
padding: 3px 5px;
margin: 2px 0;
box-sizing: border-box;
}
form {
padding: 70px 0px;
margin: 0 auto;
width: 400px;
border: 1px;
}
.largetextbox {
width: 380px;
height: 100px;
}
</style>
</head>
<body>
<form action="/action_page.php">
<h2>Template</h2>
Spoke With -
<input id="foo" type="text" name="spokewith" required="<#CDATA#>" class="Shorttextbox">
<br>
Logged in -
<input type="radio" name="loggedin" value="Yes" required="<#CDATA#>"> Yes
<input type="radio" name="loggedin" value="No"> No<br>
<br>
<h3>Describe the clients Issue</h3>
<br>
Summary -
<input id="foo" type="text" name="Summary" required="<#CDATA#>" class="Shorttextbox">
<br>
Issue Started Occurring -
<input id="foo" type="date" name="issuedate" required="<#CDATA#>">
<br>
Number of affected PC's
<select required name="NoPCsaffected">
<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 id="foo" type="text" name="Error" class="Shorttextbox">
<br>
Anything Notable -
<input id="foo" type="text" name="Noteable" class="Shorttextbox">
<br>
<h3>System Information</h3>
<br>
System Audit Attached -
<select required name="Systemaudit">
<option value="">Audit</option>
<option value="Yes">Yes</option>
<option value="No">No</option>
</select>
<br>
Leap Server -
<select required name="leapserver">
<option value="">Server</option>
<option value="Live">Live</option>
<option value="LiveB">LiveB</option>
</select>
<br>
Leap Version -
<input id="foo" type="text" name="leapversion" required="<#CDATA#>" class="Shorttextbox">
<br>
32 or 64 bit -
<select required name="architecture">
<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">
<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 id="foo" type="text" name="MSOversion" class="Shorttextbox">
<br>
AntiVirus Installed -
<input id="foo" type="text" name="Antivirus" class="Shorttextbox">
<br>
<h3>Replication/Repoduction Information</h3>
<br>
Matter Number -
<input id="foo" type="text" name="matternumber" class="Shorttextbox">
<br>
Precendent code/name
<input id="foo" type="text" name="precedent" class="Shorttextbox">
<br>
Document Name -
<input id="foo" type="text" name="Documentname" class="Shorttextbox">
<br>
Report Name -
<input id="foo" type="text" name="reportname" class="Shorttextbox">
<br>
Steps to Repoduce or Replicate the issue - <br>
<textarea name="stepsforissue" class="largetextbox"></textarea>
<br>
<h3>What does the issue occur on</h3>
<br>
Does the issue occur on LEAP Data -
<select required name="Leapdata">
<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">
<option value="">Select</option>
<option value="Yes">Yes</option>
<option value="No">No</option>
</select>
<br>
<h3>What action has been taken to resolve the issue</h3>
<br>
Steps taken to resolve issue - <br>
<textarea name="stepstaken" class="largetextbox"></textarea>
<br>
<h3>Resolution</h3>
Select a resolution -
<select required name="resolution">
<option value="">Resolution</option>
<option value="Closed">Closed</option>
<option value="Escalated">Escalated</option>
</select>
<br>
<br>
</form>
<button id="copyButton">Copy</button>
<input type="reset">
<script>
document.getElementById("copyButton").addEventListener("click", function() {
copyToClipboard(document.getElementsByClassName("foo"));
});
function copyToClipboard(elem) {
// create hidden text element, if it doesn't already exist
var targetId = "_hiddenCopyText_";
var isInput = elem.tagName === "INPUT" || elem.tagName === "TEXTAREA";
var origSelectionStart, origSelectionEnd;
if (isInput) {
// can just use the original source element for the selection and copy
target = elem;
origSelectionStart = elem.selectionStart;
origSelectionEnd = elem.selectionEnd;
} else {
// must use a temporary form element for the selection and copy
target = document.getElementById(targetId);
if (!target) {
var target = document.createElement("textarea");
target.style.position = "absolute";
target.style.left = "-9999px";
target.style.top = "0";
target.id = targetId;
document.body.appendChild(target);
}
target.textContent = elem.textContent;
}
// select the content
var currentFocus = document.activeElement;
target.focus();
target.setSelectionRange(0, target.value.length);
// copy the selection
var succeed;
try {
succeed = document.execCommand("copy");
} catch(e) {
succeed = false;
}
// restore original focus
if (currentFocus && typeof currentFocus.focus === "function") {
currentFocus.focus();
}
if (isInput) {
// restore prior selection
elem.setSelectionRange(origSelectionStart, origSelectionEnd);
} else {
// clear temporary content
target.textContent = "";
}
return succeed;
}
</script>
</body>
</html>
我如何正确地实现一个按钮，以取代当前的“复制”按钮，该按钮将复制所有数据，以便将其粘贴到记事本中？
回答 1
Stack Overflow用户
发布于 2018-08-13 14:21:36
如果希望处理表单，请删除返回的false
$(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 src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>
<body>
<h2>TEST</h2>
<form id="myForm" action="/action_page.php">
Spoke With:<br>
<input class="input" type="text" name="spokewith" required="<#CDATA#>">
<br>
<br>
Logged in:<br>
<input class="input" type="radio" name="loggedin" value="Yes" required="<#CDATA#>"> Yes<br>
<input class="input" type="radio" name="loggedin" value="No"> No<br>
<br>
<br>
32 or 64 bit:<br>
<select class="input" name="architecture">
<option value="32bit">32 bit</option>
<option value="64bit">64 bit</option>
</select>
<br>
Operating System:<br>
<select class="input" name="Operatingsystem">
<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><br>
<input id="copy" type="submit" value="Copy">
<input type="reset">
</form>
</body>
</html>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/-100002097
复制相关文章
相似问题