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.

HTML:
textarea.htm HTML (445 bytes) 01.05.2021 19:29
<!DOCTYPE html >
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <title>autoresize</title>
    <link rel="stylesheet" type="text/css" href="autoresize.css" />
  </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: , published: , last modified:

Kontakt

Udo Schmal

Udo Schmal
Softwareentwickler
Olvengraben 41
47608 Geldern
Nordrhein-Westfalen
Germany





+49 2831 9776557
+49 1575 0663676
+49 2831 1328709
SMS
WhatsApp

Instagram Profile
vCard 3.0

Service Infos

CMS Info Product Name:
UDOs Webserver
Version:
0.5.0.68
Description:
All in one Webserver
Copyright:
Udo Schmal
Compilation:
Tue, 4. May 2021 23:15:05
Development Info Compiler:
Free Pascal FPC 3.3.1
compiled for:
OS:Linux, CPU:x86_64
System Info OS:
Ubuntu 20.04.2 LTS (Focal Fossa)
Hardware Info Model:
Hewlett-Packard HP Pavilion dv7 Notebook PC
CPU Name:
Intel(R) Core(TM) i5-2450M CPU @ 2.50GHz
CPU Type:
x86_64, 1 physical CPU(s), 2 Core(s), 4 logical CPU(s), 2749.189 MHz