autoresize Textarea Ein Textarea Element das seine Höhe mit zunehmender Zeilenzahl verändert, damit der vollständige Text angezeigt wird aber kein überflüssiger Leerraum. Textarea (autoresize): HTML: textarea.htm HTML (376 Bytes) 30.11.2021 23:34 <!DOCTYPE html > <html lang="en"> <head> <meta charset="utf-8" /> <title>autoresize</title> </head> <body><label for="info">Textarea (autoresize):</label><textarea id="info" name="info" data-type="autoresize" rows="1" cols="33" placeholder="please input some text…"></textarea> <script src="autoresize.js"></script> </body> </html> JavaScript: autoresize.js JavaScript (799 Bytes) 01.05.2021 19:53 // coding: utf-8 /** Created by: Udo Schmal | https://www.gocher.me/ */ (function () { 'use strict'; // load stylesheet if (!document.getElementById('autoresize.css')) { var style = document.createElement("link"); style.type = 'text/css'; style.href = '/code/autoresize/autoresize.css'; style.id = 'autoresize.css'; style.rel = 'stylesheet'; document.head.appendChild(style); } function resize (event) { this.style.height = 'auto'; this.style.height = (this.scrollHeight+5) + 'px'; } var autoresize = document.querySelectorAll("[data-type='autoresize']"); for (var i = 0; i < autoresize.length; i++) { var el = autoresize[i]; el.addEventListener('keyup', resize); el.addEventListener('keypress', resize); } })(); StyleSheet: autoresize.css StyleSheet (76 Bytes) 01.05.2021 19:52 textarea[data-type="autoresize"] { resize: none; vertical-align: top; } Author: Udo Schmal, published: 01.05.2021, last modified: 06.09.2023