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

Question

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

HTML

<input type="text" value="Hello World" 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>

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

Answer 1

您可以改用textarea 。

<textarea id="textBox" rows="100" cols="100">
</textarea>

Answer 2

考虑使用带有col和rows的textarea来增加大小。

您可以在w3 学校获得有关textarea的更多信息

运行下面的代码片段以查看它。

 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 id="textBox"rows="10" cols="50">Hello World</textarea> <div class="tooltip"> <button onclick="myFunction()" onmouseout="outFunc()"> <span class="tooltiptext" id="myTooltip">Copy to clipboard</span> Copy Text </button> </div>

Answer 3

您应该为此使用textarea元素。

此外，您的 javascript 不需要此行： copyText.setSelectionRange(0, 99999);

Answer 4

尝试使用“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>

然后在我们的 myFunction 中：

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

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