如何使用复制按钮复制innerHtml结果
[英]How to copy the innerHtml results using copy button
问题描述
点击提交按钮后，我在innerhtml中得到结果。 我需要使用复制按钮复制结果。 请帮帮我.... 下面提到的脚本： 在此处输入链接描述
<!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>
3 个解决方案
解决方案1
0 2019-12-09 17:05:47
好吧，我想这就是你想要的......
Javascript：
function copyToClipboard() {
document.querySelector('#display').select();
document.execCommand('copy');
}
而且我不知道如何从输入中获取它，所以如果你这样做，然后设置没有边框的输入样式，使其看起来不像输入......
<button id="copyToClipboard" onclick="copyToClipboard()" style=" height:30px; width:100px" >Copy</button>
<input id = "display" name="exampleClipboard" style="width:500px; border: none;" type="text">
解决方案2
0 2019-12-09 19:17:54
我玩弄了第一个答案，但也无法让它为我工作。 所以我尝试了这种方式。 注意：我给你一个创建测试对话框的函数。 实际功能如下图所示。 但是我切换到 textarea 而不是 div，这可能不是您想要的。
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");
}
因此，也许您想更改为文本区域而不是 div。 我经常将此技术用于文本框，但之前从未尝试过使用 div。
解决方案3
0 已采纳 2019-12-10 12:43:21
这有点棘手，因为它不是TextElement您不能将其select()作为文本。
所以我们在这里做的是获取div元素的 innerText，然后我们创建一个 Textarea 元素并附加值，然后我们可以select()并将其复制到剪贴板，这里有工作代码：
<!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>
如何使用Javascript中的复制按钮将文本框的上下文复制到剪贴板
[英]How to copy the contexts of textbox into clipboard using the copy button in Javascript
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.