[英]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";
}
Consider using textarea
with col
and rows
to increase size.考虑使用带有
col
和rows
的textarea
来增加大小。
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>
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.