Javascript 如何使文本框内的文本看起来像textarea

我想制作一个文本框，可以手动将文本粘贴到其中，然后单击“复制”按钮将框中的所有文本选择到剪贴板。但是文本排成一长行，但我希望它看起来更像一个段落。这是到目前为止我的代码

HTML

复制到剪贴板 复制文本 JavaScript

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

  var tooltip = document.getElementById("myTooltip");
  tooltip.innerHTML = "Copied: " + copyText.value;
}

function outFunc() {
  var tooltip = document.getElementById("myTooltip");
  tooltip.innerHTML = "Copy to clipboard";
}

你可以用一个字母代替

考虑使用带有列和行的textarea来增加大小

您可以在上获得有关textarea的更多信息

运行下面的代码段查看它

函数myFunction{ var copyText=document.getElementByIdtextBox； copyText.select； copyText.setSelectionRange0，99999； 文件副本； var tooltip=document.getElementByIdmyTooltip； tooltip.innerHTML=已复制：+copyText.value； } 功能输出{ var tooltip=document.getElementByIdmyTooltip； tooltip.innerHTML=复制到剪贴板； } 你好，世界 复制到剪贴板 复制文本 您应该为此使用一个元素

此外，您的javascript不需要这一行：

---

copyText.setSelectionRange0，99999

尝试使用contenteditable属性。您可以将其添加到任何html元素中

<div contenteditable="true" id="textBox" style="height:500px; width:1000px;" />

<div class="tooltip">
  <button onclick="myFunction()" onmouseout="outFunc()">
    <span class="tooltiptext" id="myTooltip">Copy to clipboard</span>
    Copy Text
  </button>
</div>

---

Contenteditable可以应用于每个有效的html标记，以使其内容可编辑。从技术上讲，您可以将其应用于页面上的所有内容，以使浏览器中的所有内容都可编辑：

也许您可以使用textarea:

<div contenteditable="true" id="textBox" style="height:500px; width:1000px;" />

<div class="tooltip">
  <button onclick="myFunction()" onmouseout="outFunc()">
    <span class="tooltiptext" id="myTooltip">Copy to clipboard</span>
    Copy Text
  </button>
</div>

function myFunction(e) {
  const el = document.getElementById("textBox");
  const content = el.innerHtml;
  // ... do your stuff with content;
};