面积调整
我需要使用文本区域来显示一些文本。问题是，如果我放置4-5行文本，就会出现滚动条。如何使用CSS/HTML使文本区域与其内容一样大(没有滚动条)。
- textarea不需要动态地更改其大小，我只使用它来显示文本(我也可以使用禁用的textarea)
- 我只想要文本区域垂直延伸。
如果你想知道：
我使用textarea显示数据库中的一些文本，所以当创建textarea (其中包含文本)时，它应该同时显示整个文本，没有滚动条。
回答 9
Stack Overflow用户
发布于 2011-04-02 12:46:45
恐怕你不得不求助于javascript来设置你的文本区域的高度。可以使用scrollHeight属性确定总高度。
或者，您只需使用div并对div进行样式设置，使其看起来像文本区域。div会自动增长，因为它是一个禁用的文本区域，您并不需要它成为文本区域。
Stack Overflow用户
发布于 2012-10-13 17:39:38
<!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>http://jsfiddle.net/TDAcr/
Stack Overflow用户
发布于 2011-04-02 12:56:24
好吧，我刚找到这个，效果很好：
<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>现在，我不应该假设您知道Javascript (但您可能知道)。
快跑
textAreaAdjust(document.getElementById("id of your text area"))像这样的东西应该管用。我不是最好的Javascript (甚至不接近，我刚刚开始使用它前几天)
这似乎做了一些与你想要的类似的事情。第一个代码示例针对的是一个文本区域，该区域根据文本中的内容动态变化(同时输入)。它将需要一些改变才能得到你想要的结果。
https://stackoverflow.com/questions/5523145
复制相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号