javascript - 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);}

我怎样才能使它不在复制的文本中添加换行符？

Answer 1

问题是使用 selectNode

range.selectNode(textarea);

根据文档，selectNode将父节点设置为范围开始

The Range.selectNode() method sets the Range to contain the Node and its contents. The parent Node of the start and end of the Range will be the same as the parent of the referenceNode.

如果您不能使用 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>

替代品

How do I copy to the clipboard in JavaScript?

https://clipboardjs.com/