Html 调整文本区域大小
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/5523145/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Textarea resize
提问by XCS
I need to use a textarea to show some text. The problem is that if I place 4-5 rows of text a scrollbar will appear. How can I use CSS/HTML so that the textarea will be as large as it's content (no scrollbar).
我需要使用 textarea 来显示一些文本。问题是，如果我放置 4-5 行文本，则会出现滚动条。如何使用 CSS/HTML 使 textarea 与其内容一样大（无滚动条）。
the textarea doesn't need to change it's size dynamicaly, I use it only to show a text (I could also use a disabled textarea)
I want the textarea to stretch only verticaly.
textarea 不需要动态改变它的大小，我只用它来显示文本（我也可以使用禁用的 textarea）
我希望 textarea 只能垂直拉伸。
If you want to know:
I use the textarea to show some text from a database, so when the textarea (with the text in it) is created, it should show the whole text at once with no scrollbars.
如果您想知道：
我使用 textarea 显示数据库中的一些文本，因此当创建 textarea（其中包含文本）时，它应该一次显示整个文本而没有滚动条。
采纳答案by jeroen
I′m afraid you′ll have to resort to javascript to set the height of your textarea. You can use the scrollHeightproperty to determine the total height.
恐怕您将不得不求助于 javascript 来设置 textarea 的高度。您可以使用该scrollHeight属性来确定总高度。
Alternatively you could just use a divand style the divto look like a textarea. The divwill grow automatically and as it′s a disabled textarea anyway, you don′t really need it to be a textarea.
或者，您可以只使用 adiv和样式div使其看起来像一个文本区域。该div会自动和it'sa残疾人textarea的成长，无论如何，你并不真的需要它是一个文本。
回答by Amin Rahimi
<!DOCTYPE html>
<html>
<head>
<title>autoresizing textarea</title>
<style type="text/css">
textarea {
border: 0 none white;
overflow-y: auto;
padding: 0;
outline: none;
background-color: #D0D0D0;
resize: none;
}
</style>
<script type="text/javascript">
var observe;
if (window.attachEvent) {
observe = function (element, event, handler) {
element.attachEvent('on'+event, handler);
};
}
else {
observe = function (element, event, handler) {
element.addEventListener(event, handler, false);
};
}
function init (maxH) {
var text = document.getElementById('text');
var maxHeight=maxH;
var oldHeight= text.scrollHeight;
var newHeight;
function resize () {
text.style.height = 'auto';
newHeight= text.scrollHeight;
if(newHeight>oldHeight && newHeight>maxHeight )
{
text.style.height=oldHeight+'px';
}
else{
text.style.height = newHeight+'px';
oldHeight= text.scrollHeight;
}
}
/* 0-timeout to get the already changed text */
function delayedResize () {
window.setTimeout(resize, 0);
}
observe(text, 'change', resize);
observe(text, 'cut', delayedResize);
observe(text, 'paste', delayedResize);
observe(text, 'drop', delayedResize);
observe(text, 'keydown', delayedResize);
text.focus();
text.select();
resize();
}
</script>
</head>
<body onload="init(200);">
<textarea rows="1" style="height:1em;" id="text"></textarea>
</body>
</html>
回答by Freesn?w
Alright, I just found this and it works very nicely:
好吧，我刚刚发现了这个，它工作得很好：
<html>
<head>
<script>
function textAreaAdjust(o) {
o.style.height = "1px";
o.style.height = (25+o.scrollHeight)+"px";
}
</script>
</head>
<body>
<textarea onkeyup="textAreaAdjust(this)" style="overflow:hidden"></textarea>
</body>
</html>
Now, I shouldn't assume that you know Javascript (but you might).
现在，我不应该假设您知道 Javascript（但您可能会）。
Just run
赶紧跑
textAreaAdjust(document.getElementById("id of your text area"))
Something like that should work. I'm not the best with Javascript (not even close, I just started using it the other day)
这样的事情应该有效。我对 Javascript 不是最好的（甚至不接近，我前几天才开始使用它）
That seems to do something similar to what you want. The first code example is for a textarea that dynamically changes based on what is in it (while typing). It will take a couple of changes to get it how you want.
这似乎与您想要的类似。第一个代码示例用于根据其中的内容（在键入时）动态更改的文本区域。需要进行一些更改才能获得您想要的效果。
回答by Guwanch
you can use div like textarea. It is possible like this:
你可以像textarea一样使用div。可能是这样的：
<div contenteditable="true" style="width:250px; border:1px solid #777" ></div
回答by addaleax
You could use the CSS height: and width: attributes, e. g. something like
<textarea style="width:400px;height:300px">...</textarea>, just use the sizes you want to.
您可以使用 CSS 的 height: 和 width: 属性，例如类似 的属性
<textarea style="width:400px;height:300px">...</textarea>，只需使用您想要的尺寸即可。
In addition, if you want to suppress the scrollbar, use overflow:hidden.
另外，如果要抑制滚动条，请使用overflow:hidden.
回答by Freesn?w
Find the height of the font you will most likely be displaying it in. I'm not sure about CSS/HTML but you could use Javascript/PHP/ASP.net to use map to determine how big the text will be based on the number of characters. If you do it in a monospaced font, this will be even easier. Why use a text area when you could just use a label which will do the same thing all by itself?
找到您最有可能在其中显示的字体的高度。我不确定 CSS/HTML，但您可以使用 Javascript/PHP/ASP.net 来使用 map 来根据数字确定文本的大小的字符。如果你使用等宽字体，这会更容易。当您可以只使用一个标签来做同样的事情时，为什么要使用文本区域？
回答by Eskat0n
If you don't mind using JavaScript you can use approach from one of following articles: http://james.padolsey.com/javascript/jquery-plugin-autoresize/http://scvinodkumar.wordpress.com/2009/05/28/auto-grow-textarea-doing-it-the-easy-way-in-javascript/
如果您不介意使用 JavaScript，您可以使用以下文章之一的方法：http: //james.padolsey.com/javascript/jquery-plugin-autoresize/ http://scvinodkumar.wordpress.com/2009/05/ 28/auto-grow-textarea-doing-it-the-easy-way-in-javascript/
But from your questing I assume you want pure CSS solution. Then you can just mimic appereance of textarea using simple div and following css (if you just want to display text):
但是从您的探索来看，我假设您想要纯 CSS 解决方案。然后，您可以使用简单的 div 和以下 css 来模拟 textarea 的外观（如果您只想显示文本）：
div {
cursor: text;
background: lightGray;
border: 1px solid gray;
font-family: monospace;
padding: 2px 0px 0px 2px;
}
回答by Dwayne Forde
回答by Jeaf Gilbert
I assume nameattribute is not used. You can use this alternative (HTML5):
我假设name没有使用属性。您可以使用此替代方法 (HTML5)：
