document.execCommand('copy')命令在字符串的开头和结尾添加换行符。

Question

我已经编写了这个函数来复制文本到剪贴板。它可以复制内容，但会在复制的字符串中添加换行符。

function copyToClipboard(text) {
           // console.log("text",text);
            const textarea = document.createElement('textarea');
            textarea.textContent = text;
            document.body.appendChild(textarea);
            var selection = document.getSelection();
            var range = document.createRange();
            range.selectNode(textarea);
            selection.removeAllRanges();
            selection.addRange(range);
            const success = document.execCommand('copy');
            selection.removeAllRanges();
            document.body.removeChild(textarea);
            return success;
            console.log("now paste in the text area");
        }
        
      $('button').click(function () {
        copyToClipboard($('#ip').val());  
      })

textarea{
width:100%;
height: 200px;
border: 1px solid grey;
}
input{
min-width: 200px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input id='ip' placeholder="insert some text and press copy"><button>Copy</button>
<textarea placeholder='perform paste in this textarea and you will see line feeds'>
</textarea>

如果您运行代码片段并按照说明操作，则可以在文本区域中看到换行符。

我尝试过的内容。

我使用了以下代码来复制到剪贴板，但由于某些原因，在我的项目中它不起作用。 但它在其他代码库中工作，并且即使在浏览器控制台中也不包含换行符。

function copyToClipBoard2(text) {
  var textArea = document.createElement("textarea");
  textArea.value = text;
  document.body.appendChild(textArea);
  textArea.select();
  var successful = document.execCommand('copy');
  if (successful){
    console.log("copied to clipboard");
  }
  document.body.removeChild(textArea);}

如何避免复制文本时添加换行符？

- NIKHIL C M

---

这确实很奇怪。我尝试了 trim 并从文本区域标签中删除了空白字符。 - mplungjan

它在Firefox 83中没有添加LF。 - Mehmet Baker

@sergeykuznetsov，这就是所有示例的工作方式。execCommand适用于输入类型或文本区域，由于我没有元素，因此需要动态创建一个文本区域，并在使用后将其删除。 - NIKHIL C M

@NIKHILCM，但你不必使用代码创建该字段。毕竟，你可以在HTML中声明它，并在代码中引用此字段。 - s.kuznetsov

你为什么不使用textarea.select()呢？ - ATP

Answer 1

问题在于使用 selectNode。

range.selectNode(textarea);

根据文档，selectNode将父节点设置为范围起点。

引用块中的Range.selectNode()方法将范围设置为包含该节点及其内容。范围起点和终点的父节点将与参考节点的父节点相同。

如果无法使用select()，可以尝试使用setSelectionRange()。

function copyToClipboard(text) {
  const textarea = document.createElement('textarea');
  textarea.textContent = text;
  document.body.appendChild(textarea);
  textarea.focus();
  textarea.setSelectionRange(0, -1);
  const success = document.execCommand('copy');
  document.body.removeChild(textarea);
  return success;
}

$('button').click(function() {
  copyToClipboard($('#ip').val());
})

textarea {
  width: 100%;
  height: 200px;
  border: 1px solid grey;
}

input {
  min-width: 200px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input id='ip' placeholder="insert some text and press copy"><button>Copy</button>
<textarea placeholder='perform paste in this textarea and you will see line feeds'>
</textarea>

替代方案

• 如何使用JavaScript复制到剪贴板？
• https://clipboardjs.com/

- User863

---

我最终使用了clipboardjs库。 - NIKHIL C M

Answer 2

问题

document.body.appendChild(textArea);  //this line of code was the issue 

不是 document.execCommand("copy")

当将子元素添加到父元素时，每次都会创建一个新行。消除该换行符的一种方法是使用parent.innerHTML清除父元素的HTML。

第一个片段只能工作 一次，为了展示第二个片段中清除innerHTML的效果

function copyToClipboard(text) {
            const textarea = document.createElement('textarea');
            
            textarea.textContent = text;
        
            document.getElementById("xyz").appendChild(textarea);
          
            var selection = document.getSelection();
         
            selection.removeAllRanges();
           
            var range = document.createRange();
          
            range.selectNode(textarea);
           
            selection.addRange(range);
           
            const success = document.execCommand('copy');
     
            selection.removeAllRanges();
           //document.getElementById("xyz").innerHTML="";
            return success;
        }
        
      $('button').click(function () {
        copyToClipboard($('#ip').val());
      })

textarea{
width:100%;
height: 50px;
border: 1px solid grey;
}
input{
min-width: 100px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input id='ip' placeholder="insert some text and press copy"><button>Copy</button>
<textarea placeholder='perform paste in this textarea and you will see line feeds'>
</textarea>
<div id="xyz"></div>

function copyToClipboard(text) {
            const textarea = document.createElement('textarea');
            
            textarea.textContent = text;
        
            document.getElementById("xyz").appendChild(textarea);
          
            textarea.focus();
        
            var selection = document.getSelection();
         
            selection.removeAllRanges();
           
            var range = document.createRange();
          
            range.selectNode(textarea);
           
            selection.addRange(range);
           
            const success = document.execCommand('copy');
     
            selection.removeAllRanges();
           document.getElementById("xyz").innerHTML="";
            return success;
        }
        
      $('button').click(function () {
        copyToClipboard($('#ip').val());
      })

textarea{
width:100%;
height: 50px;
border: 1px solid grey;
}
input{
min-width: 100px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input id='ip' placeholder="insert some text and press copy"><button>Copy</button>
<textarea placeholder='perform paste in this textarea and you will see line feeds'>
</textarea>
<div id="xyz"></div>

- Sandrin Joy