Textarea resize

Ich brauchen, um eine textarea zu zeigen, einige text. Das problem ist, dass wenn ich 4-5 Zeilen text mit einer Bildlaufleiste angezeigt wird. Wie kann ich mit CSS/HTML, so dass die textarea-Komponente wird so groß wie es der Inhalt (keine scrollbar).

  • in der textarea nicht ändern müssen, es ist eine Größe dynamicaly, ich benutze es nur, um zu zeigen, ein text (ich könnte auch mit einem Behinderten textarea)

  • Ich möchte die textarea-Komponente für die Strecke nur verticaly.

Wenn Sie wissen wollen:

Ich verwenden Sie die textarea-Komponente, um zu zeigen, einige text aus einer Datenbank, so dass, wenn das Textfeld (mit dem text) erstellt wird, sollte er zeigen den ganzen text auf einmal ohne Scrollbalken.

  • Der ganze Sinn einer textarea ist für dem der Benutzer text eingeben kann. Wenn Sie möchten, die text anzeigen, verwenden Sie ein element mit der entsprechenden Semantik (vielleicht div -, p-oder pre).
InformationsquelleAutor Cristy | 2011-04-02
  1. 5

    Im fürchte, Sie haben zu greifen, um javascript zu setzen, die Höhe des textarea. Sie können die scrollHeight - Eigenschaft, um zu bestimmen, die gesamte Höhe.

    Alternativ könnte man einfach ein div und Stil der div zu schauen, wie ein textarea. Die div wird automatisch wachsen und als ein behinderter textarea sowieso, Sie nicht wirklich brauchen, es zu sein, eine textarea.

    InformationsquelleAutor jeroen
  2. 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>

    http://jsfiddle.net/TDAcr/

    • Brillant, Amin! Ich fühle mich wie ich habe schlug gold im internet zu finden. Sie verdienen weit mehr als vier Stimmen, aber ich habe nur die eine Stimme die ich dir geben kann.
    InformationsquelleAutor Amin Rahimi
  3. 5

    Okay, ich habe gerade diese, und es funktioniert sehr schön:

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

    Nun, ich sollte nicht davon ausgehen, dass Sie wissen, Javascript (aber man könnte).

    Einfach laufen 

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

    Etwas wie funktionieren sollte. Ich bin nicht der beste mit Javascript (nicht einmal in der Nähe, die ich gerade angefangen mit es den anderen Tag)

    Scheint, etwas ähnliches zu tun, was Sie wollen. Das erste code-Beispiel wird eine textarea-Komponente, die dynamisch ändert, basierend auf, was in ihm (während der Eingabe). Es dauert ein paar änderungen, um es zu bekommen, wie Sie wollen.

    • Ich kenne javascript, aber ich will nicht, um es hier zu verwenden. Auch sagte ich die textarea nicht editierbar sein, oder ändern Sie seine Größe, während Sie schreiben. Es braucht nur den gesamten text(wenn die Seite geladen wird), ohne scrollbar.
    • Ich weiß, C++, ich könnte auch erstellen Sie das makro, aber... Wo ist der Spaß? xD
    • Viel und viel. Es ist besser, erstellen Sie eine sauber geschriebene Seite, anstatt zu arbeiten, mit einer gehackten Sache. Vor allem beim Umgang mit den Kunden.
    • Es ist meine persönliche Website. Ich denke immer: "ok, das bad ist fertig; ich werde die nächste website doppelt so besser!"
    • Oh okay. Lernen ist das beste! Versuch und Irrtum ist der beste!
    • Kann diese wiederholt werden, um alle text-Bereiche?

    InformationsquelleAutor Freesnöw
  4. 1

    Könnte man mit der CSS-height: und width: Attribute e. g. so etwas wie
    <textarea style="width:400px;height:300px">...</textarea>, verwenden Sie einfach die Größen, die Sie möchten.

    Darüber hinaus, wenn Sie wollen, unterdrücken Sie die Bildlaufleiste, verwenden Sie overflow:hidden.

    • Das problem ist, dass der text gezeigt hat die variable Größe, so dass ich nicht sagen kann: "width:300px;" . Eine textarea kann 200px tal und ein weiterer kann sein 800px ...
    InformationsquelleAutor addaleax
  5. 1

    können Sie verwenden wie div textarea. Es ist möglich, wie diese:

    <div contenteditable="true" style="width:250px; border:1px solid #777" ></div
    InformationsquelleAutor Guwanch
  6. 0

    Finden Sie die Höhe der schriftart, werden Sie höchstwahrscheinlich eine Anzeige in. Ich bin mir nicht sicher über CSS/HTML, aber man könnte mit Javascript/PHP/ASP.net use map, um zu bestimmen, wie groß der text wird, basierend auf der Anzahl der Zeichen. Wenn Sie es in einer Monospace-schriftart, wird dies noch einfacher. Warum verwenden Sie einen text-Bereich, wenn Sie nur könnten verwenden Sie eine Beschriftung, die das gleiche tun wird, was alle von selbst?

    • Ich verwende eine textarea, weil es eine website, die ich gemacht habe vor einiger Zeit, und dann habe ich es mit textarea, ich kann das nicht ändern. Ich meine, wenn Sie Text in ein div, span, div automatische Größenanpassung. Kann ich nicht "aktivieren", die autoresize in der textarea zu?:D
    • Gut, jeder Kontrolle gemacht wird, um unterschiedliche Dinge. Texteingabefelder sind absichtlich so gemacht, dass Sie " Größe nicht ändern. Was ist der Grund dafür, dass Sie sind erforderlich, um die textarea?
    • Denn ich habe die website erstellt, vor einem Jahr, dass wir fügen Sie einige Werbung (mit text). Zurück dann ich dit es mit Texteingabefelder, und jetzt will ich ein bisschen ändern, die Art, wie Sie Aussehen. Ich will nicht gehen durch all die Werbung schon gepostet, und ersetzen Sie die "textarea" mit div.
    • Oh, ok. Ich habe noch nie wirklich einen html/css-Website vor. Alle meine Sachen ist asp.net und es ist alles eine einzige Seite ändert. Oh gut 🙂 Versuchen Sie y andere Lösung, die ich gepostet.
    InformationsquelleAutor Freesnöw
  7. 0

    Wenn Sie nichts dagegen haben, mit Hilfe von JavaScript können Sie verwenden Annäherung aus einer der folgenden Artikeln:
    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/

    Aber von Ihrem Questen ich nehme an, Sie wollen die Reine CSS-Lösung.
    Dann können Sie nur imitieren Gewand der textarea mit einfachen und div folgende css (wenn Sie nur wollen, um text anzuzeigen): 

    div {
    cursor: text;
    background: lightGray;
    border: 1px solid gray;
    font-family: monospace;
    padding: 2px 0px 0px 2px;
}
    • Das "bad" ist bereits getan. Ich habe ein textarea in die Seiten die ich angelegt habe, bevor, und ich möchte dies tun, um alle von Ihnen, ohne etwas zu ändern auf der Seite, nur die änderung der CSS-filme
    • Es ist unmöglich, nur mit CSS (auch CSS3). Sie haben zu greifen, um mit Hilfe von etwas JavaScript-Code.
    InformationsquelleAutor Eskat0n
  8. 0

    Ich gehe davon aus name - Attribut wird nicht verwendet. Sie können mit dieser alternative (HTML5):

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

    InformationsquelleAutor Jeaf Gilbert
  9. 0

    Mithilfe der resize-Eigenschaft arbeitet in diesen Tagen:

    resize: none;

    InformationsquelleAutor Dwayne Forde
Schreibe einen Kommentar