Textarea调整大小

Question

Textarea调整大小

我需要使用textarea来显示一些文本.问题是,如果我放置4-5行文本,则会出现滚动条.如何使用CSS/HTML使textarea与其内容一样大(无滚动条).

textarea不需要动态改变它的大小,我只用它来显示文本(我也可以使用一个禁用的textarea)
我希望textarea只能拉伸.

如果你想知道:
我使用textarea来显示数据库中的一些文本,所以当创建textarea(带有文本)时,它应该立即显示整个文本而没有滚动条.

Answer 1

<!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>

Run Code Online (Sandbox Code Playgroud)

http://jsfiddle.net/TDAcr/

很棒,阿明!通过找到这个,我觉得我在互联网上打了一针.你应该获得超过四票的票数,但我只有一票可以给你. (3认同)

Answer 2

jer*_*oen 5

我担心你不得不求助于javascript来设置textarea的高度.您可以使用该scrollHeight属性来确定总高度.

或者你可以使用a div和样式div看起来像textarea.它div会自动增长,因为它是一个残疾的textarea无论如何,你真的不需要它成为textarea.

Answer 3

Fre*_*nöw 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>

Run Code Online (Sandbox Code Playgroud)

现在,我不应该假设你知道Javascript(但你可能).

赶紧跑

textAreaAdjust(document.getElementById("id of your text area"))

Run Code Online (Sandbox Code Playgroud)

这样的事情应该有效.我不是最好的Javascript(甚至没有关闭,我刚开始使用它)

这似乎与你想要的东西类似.第一个代码示例是针对textarea,它根据其中的内容(在键入时)动态更改.需要进行一些更改才能获得您想要的效果.

归档时间：	14 年，6 月前
查看次数：	21826 次
最近记录：	11 年，9 月前