我需要使用textarea来显示一些文字。问题是,如果我放置4-5行文本,则会出现滚动条。如何使用CSS / HTML使textarea与其内容一样大(无滚动条)。
textarea不需要动态改变它的大小,我只用它来显示文本(我也可以使用一个禁用的textarea)
我希望textarea只能拉伸。
如果你想知道:
我使用textarea来显示数据库中的一些文本,因此当创建textarea(带有文本)时,它应该立即显示整个文本而没有滚动条。
答案 0 :(得分:12)
<!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>
答案 1 :(得分:5)
我担心你必须使用javascript来设置textarea的高度。您可以使用scrollHeight
属性来确定总高度。
或者你可以使用div
并将div
设置为看起来像textarea。 div
会自动增长,无论如何它都是一个禁用的textarea,你真的不需要它成为textarea。
答案 2 :(得分:5)
好吧,我刚发现这个并且效果非常好:
<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(甚至没有关闭,我刚开始使用它)
这似乎做了类似于你想要的事情。第一个代码示例是针对textarea,它根据其中的内容(在键入时)动态更改。需要进行一些更改才能达到您想要的效果。
答案 3 :(得分:1)
您可以使用CSS height:和width:属性,例如。 G。就像是
<textarea style="width:400px;height:300px">...</textarea>
,只需使用您想要的尺寸。
此外,如果要取消滚动条,请使用overflow:hidden
。
答案 4 :(得分:1)
你可以使用像textarea这样的div。这可能是这样的:
<div contenteditable="true" style="width:250px; border:1px solid #777" ></div
答案 5 :(得分:0)
找出你最有可能显示它的字体的高度。我不确定CSS / HTML但你可以使用Javascript / PHP / ASP.net来使用map来确定文本的大小关于字符数。如果您使用等宽字体,这将更容易。为什么要使用一个文本区域,你可以使用一个标签,它将自己做同样的事情?
答案 6 :(得分:0)
如果您不介意使用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/
但是从你的探索中我假设你想要纯CSS解决方案。 然后,您可以使用简单的div和跟随css(如果您只想显示文本)模仿textarea的appereance:
div {
cursor: text;
background: lightGray;
border: 1px solid gray;
font-family: monospace;
padding: 2px 0px 0px 2px;
}
答案 7 :(得分:0)
我假设未使用name
属性。您可以使用此替代方法(HTML5):
答案 8 :(得分:0)
这些天使用resize property工作:
调整大小:无;