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

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

标签： javascripthtmldom

Answer 1

问题是使用selectNode

range.selectNode(textarea);

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

Range.selectNode() 方法将 Range 设置为包含节点及其内容。Range的开始和结束的父节点将与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>

备择方案

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