=
34.238.189.171

Daschmi's Notizblog

Logo des Etikators - Tool um online drucken von Etiketten für selbst angefertigte Tinkturen

HTML Textarea auf Zeilen/Rows bei Eingabe begrenzen

Erstellt in Sonstiges am 19. Januar 2019

Um ein HTML Input Element von Typ TEXTAREA auf Zeilenanzahl zu beschränken kann folgender Code verwendet werden.

Voraussetzung:

  • TEXTAREA hat eine feste Breite und Höhe
  • TEXTAREA hat eine definierte Zeilenhöhe
  • Resize der TEXTAREA sollte unterbunden werden
  • jQuery (der Code kann auch auf reines vanilla.js umgeschrieben werden)
<textarea style="white-space:normal; resize:none; min-height:0px; height:60px; width:300px; line-height:20px;" rows="3" id="limitlines"></textarea>

jQuery(document).ready(function() {
						
   jQuery('#limitlines').on('input', function() {
      
      var jqTextarea = jQuery(this);
      var line_height = parseInt(jqTextarea.css('line-height').replace(/px/, ''));
      var rows = parseInt(jqTextarea.attr("rows"));
      
      while (jqTextarea.get(0).scrollHeight > rows * line_height) {
            
         jqTextarea.val(jqTextarea.val().substring(0, jqTextarea.val().length - 1)); 
         
      }
         
   });
   
});

Beispiel:



Bitte genehmigen Sie die Verwendung von Cookies dieser Website! Mehr Informationen

Die Cookie-Einstellungen auf dieser Website sind auf "Cookies zulassen" eingestellt, um das beste Surferlebnis zu ermöglichen. Wenn du diese Website ohne Änderung der Cookie-Einstellungen verwendest oder auf "Akzeptieren" klickst, erklärst du sich damit einverstanden.

Schließen