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: