Ein Textarea Element das seine Höhe mit zunehmender Zeilenzahl verändert, damit der vollständige Text angezeigt wird aber kein überflüssiger Leerraum.
HTML:
<!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:
// 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:
textarea[data-type="autoresize"] {
resize: none;
vertical-align: top;
}
