Question

复制到剪贴板，文本区域

2021-07-20

1477

html css

我是 HTML 和 CSS 的完全初学者，也是这个社区的新人，这是我的第一篇帖子，我查看了很多类似的帖子，但不幸的是无法找到我想要的内容。我真的希望有人能帮助我，因为我自己找不到解决方案。

我想实现的目标：

我有一段文本，我想通过单击按钮来复制。
文本应该以换行符的形式复制，而不是一行。
文本复制时不应突出显示。

我已经设法自己做了，但我认为这不是最方便的方法，但作为一个完全的初学者，我找不到更好的解决方案，如果有经验的人可以看看并提出其他选择，我将不胜感激。

function myFunction() {
  var copyText = document.getElementById("myInput");
  copyText.select();
  copyText.setSelectionRange(0, 99999)
  document.execCommand("copy");
}

<div class="columnen">
  <p>1. Line one.<br>
      2. Line two.<br>
      3. Line three.<br>
  </p>      
  <button onclick="myFunction()">Copy text</button>
</div>

<div class="textniz">
  <textarea id="myInput" name="myInput">1. Line one.
2. Line two.
3. Line three.
  </textarea>
 </div>

解决方案有效，但我遇到的问题是我必须编辑每个文本两次，因为我使用的代码的第一部分对用户可见，代码的第二部分对用户不可见，但这实际上完成了工作。

也许我可以只设置样式类“textniz”或textarea，但我不知道如何阻止它突出显示文本。

希望我的请求有意义，并且网站上的某个人可以看看。干杯。

Answer 1

因此，您的目标不是让文本区域突出显示，也不是折叠线条。

要阻止文本区域突出显示，我们可以创建另一个文本区域并将其放在页面之外，然后将原始文本区域的值放在我们的新文本区域中，并选择其对用户不可见的值，文本将被复制。复制后，我们可以删除新创建的文本区域。

function myFunction() {
  var value = document.getElementById("myInput").value;
  var copyText = document.createElement("textarea");
  copyText.value = value;
  copyText.style.position = "fixed";
  copyText.style.top = "-1000vh";
  document.body.append(copyText)
  copyText.select();
  copyText.setSelectionRange(0, 99999)
  document.execCommand("copy");
  console.log(value)
  copyText.remove()
}

1. Line one.
2. Line two.
3. Line three.

<div class="columnen">
  <p>1. Line one.<br>
      2. Line two.<br>
      3. Line three.<br>
  </p>      
  <button onclick="myFunction()">Copy text</button>
</div>

<div class="textniz">
  <textarea id="myInput" name="myInput">1. Line one.
2. Line two.
3. Line three.
  </textarea>
 </div>