Limit maximum number of lines in a textarea

Question

I have a textarea where I have limited the amount to 3 lines in the "Rows" property. However, this maximum amount is not being respected. Is there any other way not to allow more lines to jump?

<textarea id="txtValue" onPaste="return onPasteMe(this);"   ondrop="return false" maxlength="180" style="overflow:scroll; resize: none;width:650px; font-family:'Courier New';border-width:1px; border-color:black; font-family:monospace;font-size:18pt" rows="3" runat="server"></textarea>

Thank you!

Answer 1

One possibility is not to allow line breaking using jquery.

<script>
    $(document).ready(function() { 
        $("#txtValue").keypress(function(e){                
            if (e.keyCode == 13) {                
                e.preventDefault();
            }
        });
    });
 </script>

or with javascript:

<script>
function bloquearQuebraDeLinha(event) {
    var keyCode = event.which || event.keyCode;
    if (keyCode == 13) {                
        event.preventDefault();
    }
}
</script>
<textarea id="txtValue" onkeypress="bloquearQuebraDeLinha(event);" onPaste="return onPasteMe(this);"   ondrop="return false" maxlength="100" style="overflow:scroll; resize: none;width:650px; font-family:'Courier New';border-width:1px; border-color:black; font-family:monospace;font-size:18pt" rows="3" max-rows="3" wrap="hard"runat="server"></textarea>

Answer 2

You can use jquery and the attribute maxlength to control line breaks, the problem is that it depends on the amount of characters that each line accepts, for that you will have to calculate the maxlength based on line size, but try to adapt it to your need:

//seta o total de caracteres aceitos
<textarea id="textareaid" maxlength="300" ></textarea>

//bloqueia o resize do textarea para deixar o tamanho de colunas fixo
//para fazer o calculo de quantos caracteres a linha aceita
textarea {
   resize: none;
}

//bloqueia a quebra de linha
$(document).ready(function(){

    $('#textareaid').keydown(function(e) {

        var linhasAtuais = $(this).val().split("\n").length;

        if(e.keyCode == 13 && linhasAtuais >= 3) {
            return false;
        } 
    });
 });

It doesn’t look pretty or the right way, but it’s a way.

Jsfiddle: https://jsfiddle.net/e924pjyw/

Answer 3

The attribute rows specifies the visible number of lines in a text area, what you are trying to do has nothing to do with your problem. To limit the number of characters in the widget textarea, you can limit the number of characters using the attribute maxlengthin the element textarea.

In this example I limited the number of characters in maximum 3:

const txtArea = document.getElementById('txtArea');
txtArea.addEventListener('keydown', (event) => {
    if(event.code == 'Enter') {
        alert("O BOTÃO ENTER FOI CLICADO! QUEBRANDO A LINHA...");
    }
});

<textarea id="txtArea" maxlength="10" rows="10"></textarea>

About breaking the line when you click the "enter" button, this feature does not need to be implemented, this is already pre-programmed. See the animation below, using the code above:

To prevent line breaking you must add the preventDefault() in the event, thus:

const txtArea = document.getElementById('txtArea');
txtArea.addEventListener('keydown', (event) => {
    if(event.code == 'Enter') {
        alert("O BOTÃO ENTER FOI CLICADO! QUEBRANDO A LINHA...");
        event.preventDefault();
    }
});

<textarea id="txtArea" maxlength="10" rows="10"></textarea>