Textarea Höhe automatisch anpassen

Ich muss die Höhe des Textbereichs automatisch anpassen. Standardmäßig wird es in einer einzigen Zeile sein. Während der Text wächst, muss auch die Höhe erhöht werden. Bitte schlage mir das CSS vor. oder erzähle es mir mit einem einfachen Jave Script.Textarea Höhe automatisch anpassen

-Code ist:

<!doctype html> 
<html> 
<head> 
<meta charset="UTF-8"> 
<title>Untitled Document</title> 
</head> 
<style> 
textarea { 
    resize: none; 
    overflow: auto; 
    min-height: 24px; 
    max-height: 100px; 
} 
#url{ word-break: break-all; 
    font-family: 'Lato', sans-serif; 
    cursor: text; 
    resize: none; 
    height: 24px; 
    font-size: 14px; 
    line-height: 22px; 
    background-color: transparent; 
    border: 0; 
    margin-top: 6px; 
    -webkit-box-shadow: none; 
    -moz-box-shadow: none; 
    box-shadow: none; 
    text-decoration: none; 
    width:500px} 
</style> 
<body> 
<textarea readonly id="url">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</textarea> 
<div> 
                Where does it come from?</div> 
</body> 

</html>

Quelle

2016-05-12 user3859368

Fragen, die uns bitten, ** ein Buch, ein Tool, eine Softwarebibliothek, ein Tutorial oder eine andere Offsite-Ressource ** zu empfehlen oder zu finden ** sind für Stack Overflow off-topic, da sie dazu neigen, Meinungen und Spam anzulocken. Beschreiben Sie stattdessen das Problem und was bisher unternommen wurde, um es zu lösen. * Die meisten [Einkaufslistenfragen] (http://blog.stackoverflow.com/2010/11/qa-is-hard-lets-go-shopping/) fallen unter diesen Grund. * –

Es gibt entweder zu viele mögliche Antworten, oder gute Antworten wären für dieses Format zu lang. Bitte fügen Sie Details hinzu, um die Antwortmenge einzuschränken oder ein Problem zu isolieren, das in einigen Absätzen beantwortet werden kann. –

Mögliches Duplikat von [Erstellen einer Textfläche mit automatischer Größenänderung] (http://stackoverflow.com/questions/454202/creating-a-textarea-with-auto-resize) – Shaggy

Dies kann leicht

function adjustHeight(ctrl) { 
 
    $(ctrl).css({'height':'auto','overflow-y':'hidden'}).height(ctrl.scrollHeight); 
 
} 
 
$('textarea').each(function() { 
 
    adjustHeight(this); 
 
}).on('input', function() { 
 
    adjustHeight(this); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<textarea>Your text will come here, This has a long text and it got adjusted according to the content size</textarea> 
 

 
<textarea placeholder="Type, paste, cut text here..."></textarea>

Quelle

2016-05-12 16:33:43

Eigentlich war die erste besser. –

@PraveenKumar welche? –

Ja, jetzt sieht es gut aus. Der vorinstallierte Inhalt –

mit onkey Ereignis auf TextArea- erfolgen kann dies durch die Schaffung eines contenteditable Container "gefälscht" werden.

fiddle

Eine Sache im Auge zu behalten ist, dass dies nicht mehr ein Formularelement berücksichtigt werden, so JavaScript benötigt wird, um den Wert zu ziehen.

Quelle

2016-05-12 16:46:31 Joe

Textarea Höhe automatisch anpassen

Antwort

Verwandte Themen