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?
Gibt es trotzdem eine Textbereichshöhe “autofit”, basierend auf dem Inhalt beim Laden der Seite?
leora
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();
});
-
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
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";
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>
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:
- Der div/textarea sollte nach oben expandieren, wenn der Inhalt 4em überschreitet
- Die maximale Höhe des div/textareas sollte 6em betragen
- 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
Gemeinschaft
Eine schöne Lösung
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
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
Ü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