简体   繁体   English

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

[英]How do I make the text inside a text box to appear like textarea

I want to make a text box that I can manually paste text into and then click the copy button to select all the text in the box to my clipboard.我想制作一个文本框,我可以手动将文本粘贴到其中,然后单击复制按钮到 select 框中的所有文本到我的剪贴板。 But the text is in one long line, but I want it to look more like a paragraph.但是文本是一行长的,但我希望它看起来更像一个段落。 This is my code so far.到目前为止,这是我的代码。

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

You can use a textarea instead.您可以改用textarea

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

Consider using textarea with col and rows to increase size.考虑使用带有colrowstextarea来增加大小。

You can get more info about textarea on w3 schools您可以在w3 学校获得有关textarea的更多信息

Run snippet below to see it.运行下面的代码片段以查看它。

 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>

You should use a textarea element for this.您应该为此使用textarea元素。

also, your javascript does not need this line: copyText.setSelectionRange(0, 99999);此外,您的 javascript 不需要此行: copyText.setSelectionRange(0, 99999);

Try using "contenteditable" property.尝试使用“contenteditable”属性。 You can add this to any html element.您可以将此添加到任何 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>

And then in our myFunction:然后在我们的 myFunction 中:

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

Contenteditable can be applied to every valid html tag in order to make its content editable. Contenteditable 可以应用于每个有效的 html 标签,以使其内容可编辑。 Technically you can apply it to everything on your page to make everything editable in your browser:)从技术上讲,您可以将其应用于页面上的所有内容,以使所有内容都可以在浏览器中编辑:)

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

相关问题 从SuiteScript的下拉菜单中选择选项后,如何显示文本框? - How do I make a text box appear after selecting an option from a drop-down menu in SuiteScript? 如何使用javascript使文本显示在文本字段中? - How do I make text appear in text field with javascript? 替换文本框内的文本 - Replacing text inside a textarea box 如何通过使用 jQuery 拖动其右下角来调整文本输入框的大小(如 textarea)? - How to make text input box resizable (like textarea) by dragging its right-bottom corner using jQuery? 如何像 iPhone 一样在 HTML 文本输入框中放置一个清除按钮? - How do I put a clear button inside my HTML text input box like the iPhone does? 如何修正我的文字使其显示在一行上? - How do I fix my text to make it appear on one line? 如何使 html 文本区域出现 javascript? - How do i make an html text area appear javascript? 如何制作 TextGeometry 多线? 我如何将它放在一个正方形内,使其像 html 文本一样在 div 内包装? - How do I make a TextGeometry multiline? How do I put it inside a square so it wraps like html text does inside a div? 如果我在文本框中输入“hello”,如何通过按下按钮来显示警报? - If I type "hello" into a text box, how can I make an alert appear by pressing a button? 如何使textarea元素看起来像普通文本 - How to make a textarea element look like normal text
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM