Wie Textbereich mit CSS3 autogrowrow?

Gegeben eine TextArea, die als kleine Box, einzelne Zeile beginnt, ist es möglich, mit CSS3 automatisch zu wachsen, mehrere Zeilen zu haben, da der Benutzer mehrere Zeilen eingibt, bis eine festgelegte Grenze (300px) angezeigt wird, wenn eine Bildlaufleiste mit Überlauf erscheinen würde Auto mit allen Eingängen?Wie Textbereich mit CSS3 autogrowrow?

Quelle

2013-07-18 Rolando

Ja, das ist mit JavaScript und CSS möglich. Was hast du versucht? –

Überprüfen Sie hier: http://stackoverflow.com/questions/4954252/css-textbarea-that-expands-as-you-type-text –

Frage fragt nach einer CSS3 nur Lösung, wenn möglich und diese Frage scheint veraltete Links gebrochen haben und wurde 2010 veröffentlicht. – Rolando

-3

Ja, Sie können mit CSS3. Möglicherweise müssen Sie diese mit dem Browser voranstellen.

textarea { 
    resize: vertical; 
    max-height: 300px; 
    min-height: 200px; 
} 
textarea.horiz { 
    resize: horizontal; 
    max-width: 400px; 
    min-width: 200px; 
}

Ich habe diese von einem Beitrag habe ich verwiesen habe in der Vergangenheit gezogen: mit

textarea { 
    resize: both; 
} /* none|horizontal|vertical|both */ 
textarea.vert { 
    resize: vertical; 
} 
textarea.noResize { 
    resize: none; 
}

Anschließend können Sie sie auf max Höhen und Breiten zurückhalten

Customize Textarea Resizing with CSS

Quelle

2013-07-31 08:59:22 tecshaun

+13

+1 bereits. Beachten Sie jedoch, dass dies nicht die Frage des OPs "wachsen automatisch auf mehrere Zeilen, wie der Benutzer eingibt" – Abhitalks

+23

Ich möchte nicht ein Wermutstropfen sein, aber dies sollte nicht wirklich eine akzeptierte Antwort sein, da es nicht ist autogrow. – jdepypere

Leider scheint es, dass Sie dies nicht nur mit CSS3 tun können.

Aber, es gibt eine 3.2k verkleinerte JS-Alternative, dies zu tun.

Hier ist die link einschließlich Demo und Verwendung.

Sie können es installieren, indem npm install autosize tun und mit dieser Art und Weise

autosize(document.querySelector('.yourTextAreaClass'));

Oder jQuery Stil

autosize($('.yourTextAreaClass'));

Und es wirkt wie ein Zauber. Es ist leicht und hat ein natürliches Gefühl im Gegensatz zu vielen Autoresize, die nutzlose Animationen machen.

Quelle

2016-05-02 13:17:05

Nicht möglich mit nur CSS soweit ich weiß, aber hier ist eine super winzige Angular Direktive, die nur funktioniert, indem Sie nach neuen Zeilen suchen. Sie können es leicht anpassen max Reihen usw.

angular.module('Shared.AutoGrow.Directive', []) 
.directive('autoGrow', function() { 
    return { 
    restrict: 'A', 
    link(scope, element) { 
     element.on('input change',() => { 
     const text = element[0].value; 
     const lines = 1 + (text.match(/\n/g) || []).length; 
     element[0].rows = lines; 
     }); 
    }, 
    }; 
});

Plain JS Lösung einfach haben abzuleiten sein sollte, muss nur ein Ereignis-Listener auf dem Element bei der Eingabe/Änderung zu übernehmen und das ist es.

Quelle

2017-06-13 05:55:13

Stellen Sie einfach sicher, dass das Textfeld 'height: auto' hat – RobAu

Wie Textbereich mit CSS3 autogrowrow?

Antwort

Verwandte Themen