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 (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;
}

Kontakt

Udo Schmal
Udo Schmal

Udo Schmal
Softwareentwickler
Ellerndiek 26
24837 Schleswig
Schleswig-Holstein
Germany




+49 4621 9785538
+49 1575 0663676
+49 4621 9785539
SMS
WhatsApp

Google Maps Profile
Instagram Profile
vCard 2.1, vCard 3.0, vCard 4.0

Service Infos

CMS Info

Product Name:
UDOs Webserver
Version:
0.5.1.214
Description:
All in one Webserver
Copyright:
Udo Schmal
Compilation:
Sat, 26. Oct 2024 05:52:49

Development Info

Compiler:
Free Pascal FPC 3.3.1
compiled for:
OS:Linux, CPU:x86_64

System Info

OS:
Ubuntu 22.04.5 LTS (Jammy Jellyfish)

Hardware Info

Model:
Hewlett-Packard HP Pavilion dm4 Notebook PC
CPU Name:
Intel(R) Core(TM) i5-2430M CPU @ 2.40GHz
CPU Type:
x86_64, 1 physical CPU(s), 2 Core(s), 4 logical CPU(s),  MHz