Gibt es trotzdem eine Textbereichshöhe “autofit”, basierend auf dem Inhalt beim Laden der Seite?

Lesezeit: 5 Minuten

Benutzer-Avatar
leora

Gibt es überhaupt per CSS oder Javascript die Höhe des Textbereichs basierend auf dem Inhalt? Ich habe eine fest codierte Höhe in meinem CSS, aber ich wollte, dass sie standardmäßig eingestellt wird, damit beim Laden der Seite keine vertikale Bildlaufleiste angezeigt wird?

  • Überprüfen Sie meine Antwort hier – stackoverflow.com/a/17286049/2303467

    – shubhra

    4. Mai 2014 um 1:37 Uhr

  • Haben Sie darüber nachgedacht, contenteditable zu verwenden?

    – Web-Tiki

    30. Mai 2014 um 20:30 Uhr

  • mögliches Duplikat von: stackoverflow.com/questions/12323383/…, stackoverflow.com/questions/17772260/textarea-auto-height

    – Ciro Santilli Путлер Капут 六四事

    29. August 2014 um 11:08 Uhr


Wie wäre es mit http://www.jacklmoore.com/autosize/ Lassen Sie Autosize in eine beliebige Webseite fallen und es sollte einfach funktionieren. Die Quelle ist kurz und gut kommentiert, wenn Sie neugierig sind, wie sie funktioniert.

// Example:
$(document).ready(function(){
    $('textarea').autosize();   
});

Quelle: https://github.com/jackmoore/autosize

Demo: http://www.jacklmoore.com/autosize/

  • Dies geschieht nicht nur beim Laden der Seite: Es ist dynamisch (obwohl es wahrscheinlich möglich ist, den Effekt mit diesem Plugin zu erzielen). Dynamic wurde gefragt unter: stackoverflow.com/questions/454202/…

    – Ciro Santilli Путлер Капут 六四事

    29. August 2014 um 11:05 Uhr

  • Falls jemand Probleme bei der Installation von Autosize hat, ist das wichtige Javascript unter raw.githubusercontent.com/jackmoore/autosize/master/dist/…. Nachdem Sie dieses Skript in Ihr Projekt eingefügt haben, fügen Sie einfach auch diese JavaScript-Zeile in Ihr Projekt ein: autosize(document.querySelectorAll(‘textarea’))

    – Paul Chris Jones

    4. März 2020 um 11:45 Uhr

  • Schönes, sauberes Skript, einfach zu bedienen, sehr zu empfehlen!

    – Johannes Contarino

    28. August 2020 um 15:52 Uhr

Sie können das Plugin zur automatischen Größenänderung verwenden Automatische Größenänderung der jQuery-Benutzeroberfläche

Hier ist der HTML-Code,

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script
 src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/jquery-ui.min.js"></script>
<script src="http://css-tricks.com/examples/TextareaTricks/js/autoresize.jquery.min.js"></script>
<textarea></textarea>

und hier ist die jquery,

$('textarea').autoResize();

sehen DEMO

  • Vielleicht noch ein hinzufügen $('textarea').change() um die Größenänderung beim Laden der Seite auszulösen? Die Frage wollte, dass beim Laden der Seite keine vertikale Bildlaufleiste angezeigt wird, was möglicherweise impliziert, dass das Textfeld zuvor gefüllt wurde.

    – mfirdaus

    27. Mai 2014 um 16:24 Uhr


Benutzer-Avatar
miguel-svq

Ohne Plugins könnten Sie so etwas tun

$(document).ready(function(){
  elem=document.getElementById('#elemid');
  while(elem.clientHeight < elem.scrollHeight) {elem.height(elem.height()+10)}
});

Ändern der Größe des Textbereichs, während er eine Bildlaufleiste hat (also elem.clientHeight < elem.scrollHeight). Sie können dies auch ohne JQuery ganz einfach in reinem Javascript tun.

Habe den Code nicht getestet, es ist nur das “Konzept”.

EDIT: Dumm mich, es ist viel einfacher, keine Schleifen …

if (elem.clientHeight < elem.scrollHeight) elem.style.height=elem.scrollHeight+"px";

Benutzer-Avatar
Amro

Getestet in Chrom

Reine Javascript-Lösung (Kein Plugin, kein jquery)

in Aktion: Geige

Ich habe 3 Funktionen erstellt:

  • Zeilenhöhe erhalten
  • Anzahl Zeilen erhalten
  • Stellen Sie die Höhe des Textbereichs während der Eingabe ein (Eingabeereignis)
    //attach input event
    document.getElementById('ta').addEventListener('input', autoHeight, false);

    function autoHeight(e){
        var lh = getLineHeightInPixels(e.target);
        var nol = getNumberOfLines(e.target);
        var ht = lh * nol;
        e.target.style.height = ht + 'px';
    }

    function getNumberOfLines(el){
        var text = el.value
        var lines = text.split(/\r|\r\n|\n/);
        return lines.length;
    }

    function getLineHeightInPixels(el){

        var tempDiv = document.createElement('div');

        tempDiv.style.visibility = 'hidden';

        tempDiv.style.fontFamily = getComputedStyle(el).getPropertyValue('font-family');
        tempDiv.style.fontSize = getComputedStyle(el).getPropertyValue('font-size');
        tempDiv.style.lineHeight = getComputedStyle(el).getPropertyValue('line-height');
        tempDiv.style.fontVariant = getComputedStyle(el).getPropertyValue('font-variant');
        tempDiv.style.fontStyle = getComputedStyle(el).getPropertyValue('font-style');

        tempDiv.innerText="abcdefghijklmnopqrstuwxyz";

        document.documentElement.appendChild(tempDiv);

        var ht = parseInt(getComputedStyle(tempDiv).getPropertyValue('height'))

        document.documentElement.removeChild(tempDiv);
        return (ht);
    }

    //set height on document load
    document.addEventListener('DOMContentLoaded', function(){document.getElementById('ta').style.height = getLineHeightInPixels(document.getElementById('ta')) + 'px';}, false);
<textarea id="ta"></textarea>

Benutzer-Avatar
Kaya-Toast

Diese andere Frage zu WhatsApp-ähnlichen Eingaben wurde fälschlicherweise als Duplikat dieser aktuellen Frage markiert. Da ich dort nicht antworten kann, antworte ich hier.

Ich habe versucht, einen WhatsApp-ähnlichen Eingabebereich mit den folgenden Funktionen zu erstellen:

  1. Der div/textarea sollte nach oben expandieren, wenn der Inhalt 4em überschreitet
  2. Die maximale Höhe des div/textareas sollte 6em betragen
  3. Der Nachrichtenbereich (über dem div/textarea) sollte sich verkleinern, dh die Reißnägelgröße der Bildlaufleiste sollte sich ändern.

Hier ist meine reine CSS-Lösung, falls jemand danach sucht (wie ich es vor ein paar Minuten war).

.arena {
  position: absolute;
  height: 20em;
  width: 12em;
  background-color: #efefef;
  padding: 1em;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.messages {
  padding: 0.2em;
  height: 5em;
  flex: 1 1 0;
  overflow: auto;
}
.content {
  background-color: teal;  
  height: 20em;
}
.footer {
  position: relative;
  background-color: #cdcdcd;
  padding: 0.2em;
}
.editable {
  outline: none;
  max-height: 6em;
  min-height: 4em;
  overflow: auto;
  width: 80%;
  background-color: #fff;
}
<div class="arena">
  <div class="messages">
    <div class="content"></div>
  </div>
  <div class="footer">
    <div class="editable" contenteditable="true"></div>
  </div>
</div>

  • OP fragt nach Textbereich, der sich von contentEditable unterscheidet.

    – MarsAndBack

    21. Januar 2020 um 1:25 Uhr

Benutzer-Avatar
Gemeinschaft

Eine schöne Lösung

JSFiddle

HTML

<div id="container">
    <textarea >
    1
    12
    123
    1234
    12345
    123456
    1234567
    </textarea>
</div>

CSS

div#container textarea {
    overflow-y: hidden; /* prevents scroll bar flash */
    padding-top: 1.1em; /* prevents text jump on Enter keypress */
}

JQuery

// auto adjust the height of
$('#container').on( 'keyup', 'textarea', function (e){
    $(this).css('height', 'auto' );
    $(this).height( this.scrollHeight );
});
$('#container').find( 'textarea' ).keyup();

  • OP fragt nach Textbereich, der sich von contentEditable unterscheidet.

    – MarsAndBack

    21. Januar 2020 um 1:25 Uhr

Benutzer-Avatar
Mazzu

Hey, kann mit dem ExpandingTextArea-Plugin gehen, in dem ein unsichtbares Clone-Pre-Element hinter Ihrem Textbereich beibehalten wird. Immer wenn sich die Höhe dieses Pre ändert, wird der Textbereich aktualisiert.

Es ist einfach nur einschließen “https://stackoverflow.com/questions/23451611/expanding.js” und “jQuery” auf deiner Seite und fügen Sie dem Textbereich die Klasse “Expanding” hinzu zu denen du erweitern musst.

<script src="https://stackoverflow.com/questions/23451611/expanding.js"></script>
<textarea class="expanding"></textarea>

Folgen die Verbindung für weitere Details und Demo

Notiz: Es funktioniert beim Laden von Dokumenten für bereits hinzugefügte Texte

  • @leora, bist du mit der obigen Erklärung einverstanden. Es kann das gesuchte sein. 🙂

    – Mazzu

    2. Juni 2014 um 5:06 Uhr

1052720cookie-checkGibt es trotzdem eine Textbereichshöhe “autofit”, basierend auf dem Inhalt beim Laden der Seite?

This website is using cookies to improve the user-friendliness. You agree by using the website further.

Privacy policy