O atributo rows
especifica o número visível de linhas em uma área de texto, o que você está tentando fazer não tem nada haver com o seu problema. Para limitar a quantidade de caracteres no elemento textarea
, você pode limitar a quantidade de caracteres utilizando o atributo maxlength
no elemento textarea
.
Neste exemplo limitei a quantidade de caracteres de no máximo 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>
Sobre quebrar a linha quando clicar no botão "enter", esta funcionalidade não precisa ser implementada, isto já é pré-programado. Veja a animação abaixo, utilizando o código acima:

Para prevenir a quebra de linha você deve adicionar o preventDefault()
no event
, deste modo:
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>
rows
é usado pra definir quantas linhas(height em linhas) essetextarea
terá ao ser renderizado, não seria melhor definir um limite de caracteres notextarea
que atenda a sua necessidade?(maxlenght="180")
, terá que limitar o maxlength ao máximo das 3 linhas(maxlength="150")
por exemplo ou aumentar as linhas para caber os 180.enter
para quebrar a linha dentro do textarea, ou vc quer que o conteúdo não ultrapasse mais que 3 linhas dentro do textarea?