Hauptmenü

Werkzeuge

Kategorien

Archiv

HTML Textarea auf Zeilen/Rows bei Eingabe begrenzen

Erstellt in Allgemein am 19. Januar 2019 vom Daschmi

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: