Textarea resize | 易学教程

问题

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).

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.

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.

回答1:

I´m afraid you´ll have to resort to javascript to set the height of your textarea. You can use the scrollHeight property to determine the total height.

Alternatively you could just use a div and style the div to look like a textarea. The div will grow automatically and as it´s a disabled textarea anyway, you don´t really need it to be a textarea.

回答2:

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

回答3:

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).

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)

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.

回答4:

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.

In addition, if you want to suppress the scrollbar, use overflow:hidden.

回答5:

you can use div like textarea. It is possible like this:

<div contenteditable="true" style="width:250px; border:1px solid #777" ></div

回答6:

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?

回答7:

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/

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):

div {
    cursor: text;
    background: lightGray;
    border: 1px solid gray;
    font-family: monospace;
    padding: 2px 0px 0px 2px;
}

回答8:

I assume name attribute is not used. You can use this alternative (HTML5):

http://jsfiddle.net/JeaffreyGilbert/T3eke/

回答9:

Using the resize property works these days:

resize: none;

来源：https://stackoverflow.com/questions/5523145/textarea-resize

标签

html

css

textarea