在JavaScript中复制多行文本_Javascript_Html

在JavaScript中复制多行文本

javascript html

在JavaScript中复制多行文本,javascript,html,Javascript,Html,我知道有很多关于复制和粘贴的讨论，当有多行时，复制和粘贴不起作用，因为它只是将所有内容粘贴到同一行上。我在使用JQuery时发现了很多修复，但我没有使用JQuery。想知道是否有人能帮我？我希望它像这样粘贴 Copy1 副本1 副本1 而不是 Copy1Copy1Copy1 谢谢 <!DOCTYPE html>  <html lang="en"> &

我知道有很多关于复制和粘贴的讨论，当有多行时，复制和粘贴不起作用，因为它只是将所有内容粘贴到同一行上。我在使用JQuery时发现了很多修复，但我没有使用JQuery。想知道是否有人能帮我？我希望它像这样粘贴

Copy1
副本1
副本1

而不是

Copy1Copy1Copy1

谢谢

<!DOCTYPE html>
<!-- saved from url=(0014)about:internet -->
<html lang="en">
<html>
<head>
<title>Central</title>

<meta name="viewport" content="width=device-width">
</head>
<body>
<div id="container">
    
<div id="Table">

</div>
        
</div>

</body>

<script type="text/javascript" src="Copy.js"></script>

<script>

window.onload = function() {
    
GetCopy();
   
   
var a = document.getElementsByClassName('CopyButton');

for (var i = 0; i < a.length; i++) {
  a[i].addEventListener('click', function() {
    var b = this.parentNode.parentNode.cells[2].textContent;
    
    copyToClipboard(b);
    
  });
}

}

function copyToClipboard(text) {
  var dummy = document.createElement("textarea");
  document.body.appendChild(dummy);
  dummy.value = text;
  dummy.select();
  document.execCommand("copy");
  document.body.removeChild(dummy);
}


</script>
</html>


中心的
window.onload=函数（）{
GetCopy（）；
var a=document.getElementsByClassName（'CopyButton'）；
对于（变量i=0；i


js
函数GetCopy（）{
var数据\
\
头衔\
\
废话\
\
第1行\
\
复制我1
复制我1
复制我1\
\
第2排\
\
复制我2
复制我2
复制我3\
\
'
document.getElementById（'Table'）。innerHTML=data；}

更新-这是我更新的代码，当我尝试拉入js表时，它没有正确粘贴

<script type="text/javascript" src="Copy.js"></script>

<script>
    
window.onload = function() {
    
GetCopy();
   
   
var a = document.getElementsByClassName('CopyButton');

for (var i = 0; i < a.length; i++) {
  a[i].addEventListener('click', function() {
    var b = this.parentNode.parentNode.cells[2].textContent;
    
    copyToClipboard(b);
    
  });
}

}

function copyToClipboard(text) {
  var dummy = document.createElement("textarea");
  document.body.appendChild(dummy);
  dummy.value = text;
  dummy.select();
  document.execCommand("copy");
  document.body.removeChild(dummy);
}


</script>


<div id="container">
<div id="Table">
</div> 
</div>


<style>
td {
  white-space: pre-wrap;
}
</style>


window.onload=函数（）{
GetCopy（）；
var a=document.getElementsByClassName（'CopyButton'）；
对于（变量i=0；i


js
函数GetCopy（）{
var数据\
\
头衔\
\
废话\
\
第2排\
\
抄送我1
\
抄送我1
\
抄送我1
\
\
第2排\
\
抄送我2
\
抄送我2
\
抄送我3
\
\
'
document.getElementById（'Table'）。innerHTML=data；}

您可以简单地使用换行符来分隔文本，并使用

空白：预换行

来保留空白，而不是在一行中显示所有内容。此外，您可以使用模板文字（由反勾号分隔）轻松创建多行字符串，而无需使用

转义换行符

实例：

window.onload=function（）{
GetCopy（）；
var a=document.getElementsByClassName（'CopyButton'）；
对于（变量i=0；i


td{
空白：预包装；
}

在此处粘贴文本：
您可以简单地使用换行符来分隔文本，并使用空白：预换行
来保留空白，而不是在一行中显示所有内容。此外，您可以使用模板文字（由反勾号分隔）轻松创建多行字符串，而无需使用\
转义换行符
实例：

window.onload=function（）{
GetCopy（）；
var a=document.getElementsByClassName（'CopyButton'）；
对于（变量i=0；i

td{
空白：预包装；
}

在此处粘贴文本：
upt-Copy1应粘贴为3个不同的行supt-Copy1应粘贴为3个不同的行感谢响应hev1。当函数GetCopy在HTML上时，我实现了这一点，但是当我在页面上加载了一个.js表时，我无法粘贴多行。我是否需要对js文件进行一些调整以使其正确粘贴？在这种情况下，请创建一个。但是，我建议修改JavaScript以匹配我作为示例提供的代码。Dev1-我在顶部更新了我的代码。再次感谢你的帮助。非常感谢，我现在可以用了。我在js表中使用了\n并允许我粘贴多行。很抱歉：）非常感谢您的回复。当函数GetCopy在HTML上时，我实现了这一点，但是当我在页面上加载了一个.js表时，我无法粘贴多行。我是否需要对js文件进行一些调整以使其正确粘贴？在这种情况下，请创建一个。但是，我建议修改JavaScript以匹配我作为示例提供的代码。Dev1-我在顶部更新了我的代码。再次感谢你的帮助。非常感谢，我现在可以用了。我在js表中使用了\n，并允许我粘贴多行。很抱歉：）
<script type="text/javascript" src="Copy.js"></script>

<script>
    
window.onload = function() {
    
GetCopy();
   
   
var a = document.getElementsByClassName('CopyButton');

for (var i = 0; i < a.length; i++) {
  a[i].addEventListener('click', function() {
    var b = this.parentNode.parentNode.cells[2].textContent;
    
    copyToClipboard(b);
    
  });
}

}

function copyToClipboard(text) {
  var dummy = document.createElement("textarea");
  document.body.appendChild(dummy);
  dummy.value = text;
  dummy.select();
  document.execCommand("copy");
  document.body.removeChild(dummy);
}


</script>


<div id="container">
<div id="Table">
</div> 
</div>


<style>
td {
  white-space: pre-wrap;
}
</style>

function GetCopy() {
var data = '<table id="myTable"> \
<tr class="header"> \
<th>Title</th> \
<th></th> \
<th>Verbiage</th> \
</tr> \
<tr><td>Row 2</td> \
<td><input type="button" class="CopyButton" value="Copy" onclick="" /></td> \
<td>Copy Me 1 <br> \
Copy Me 1 <br>\
Copy Me 1<br></td> \
</tr> \
<tr><td>Row 2</td> \
<td><input type="button" class="CopyButton" value="Copy" onclick="" /></td> \
<td>Copy Me 2 <br>\
Copy Me 2 <br>\
Copy Me 3<br></td> \
</tr> \
</table>'
document.getElementById('Table').innerHTML =data; }