时间戳

首页 > 解决方案 > 复制到剪贴板，文本区域

html - 复制到剪贴板，文本区域

问题描述

我是 HTML 和 CSS 的完整初学者，并且是这个社区的新手，这是我的第一篇文章，我检查了很多类似的帖子，但不幸的是无法找到我正在寻找的内容。我真的希望有人可以帮助我，因为我自己无法找到解决方案。

我要完成的工作：

  1. 我有一个文本，我想通过单击按钮来复制它。
  2. 文本应该用换行符而不是一行来复制。
  3. 复制文本时不应突出显示文本。

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

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的样式，但我不知道如何阻止它突出显示文本。

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

标签： htmlcss

解决方案

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

为了阻止 textarea 被突出显示，我们可以创建另一个 textarea 并将其从页面中移开，并将原始 textarea 的值放入我们的新 textarea 并选择其对用户不可见的值，文本将被复制. 复制后，我们可以将新创建​​的textarea去掉。

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>

推荐阅读