0

Tenho o seguinte trecho de código :

@Html.TextAreaFor(model => model.men_mensagem, new { @cols = Model.Men_caracteres, @rows = Model.Men_linha })

Eu defino o número de linhas, mas isso é apenas para exibição, correto? Gostaria de limitar, ex: terminou a linha 6, não pode digitar mais nada, como se fosse um maxLength, só que invés de caracteres, limita por linha. Existe alguma maneira de fazer isso?

4
  • 1
    o elemento textarea não tem suporte pra isso, precisa fazer com javascript. usando algum evento, tipo keypress, keydown, etc e contar as linhas para poder limitar 11/04/2019 às 13:33
  • Poxa, que pena, me parece meio complicado kk, mas vou tentar, obrigado 11/04/2019 às 13:40
  • Você conhece algum elemento que tenha suporte a isso? 11/04/2019 às 13:41
  • 1
    não existe, mas vc pode usar javascript para isso... veja o exemplo abaixo que coloquei 11/04/2019 às 13:55

4 Respostas 4

2

Você pode utilizar o javascript para realizar bloquear a quantidade de linhas e colunas, segue um exemplo prático junto com o MVC:

Exemplo:

function limitarTextArea(campo){
    var string = campo.value;
    var novastring = "";
    var linhas = new Array();
    var trocarLinha = false;
    linhas = string.split("\n");
    var contador = linhas.length;

    for (x in linhas){
        if(linhas[x].length > campo.cols-2){
            linhas[x] = linhas[x].substring(0, campo.cols);
            trocarLinha=true;
        }
        if(x < campo.rows){
            novastring += linhas[x] + "\n";
        }
    }

    if (contador > campo.rows || trocarLinha) {
        campo.value = novastring.substring(0, novastring.length-1);
    }
    return contador <= campo.rows;
}
<textarea id="teste" rows=5 cols="50" onkeypress="return limitarTextArea(this)">
</textArea>

Sua TextArea:

@Html.TextAreaFor(model => model.men_mensagem, new { @cols = "5", @rows = "5", @onkeypress = "return limitarTextArea(this);" })
9
  • Talvez eu esteja fazendo algo errado, mas todas as respostas me permite criar linhas ilimitado 11/04/2019 às 14:17
  • Aqui funciounou perfeitamente, tente testar trocando o Model.Men_caracteres e Model.Men_linha por um valor fixo. Ex: rows = "5", cols = "5". 11/04/2019 às 14:28
  • Coloquei no compilador aqui do stack, de uma olhada se é isso que deseja. 11/04/2019 às 14:34
  • Quase isso cara, o único problema ai é que ele para no 5º carácter, e eu gostaria que fosse na 5º linha 11/04/2019 às 14:35
  • Ele também para na 5° linha 11/04/2019 às 14:42
2

Talvez usando o .readyState, o código irá esperar que a página seja totalmente carregada para aplicar as funções. Assim, você pode usar a RegEx /\n/g para contar o número de linhas e impedir que haja mais de 6:

document.onreadystatechange = function(){
   if(document.readyState == "complete"){
      document.getElementById("ta").onkeydown = function(e){
         var linhas = this.value.match(/\n/g);
         if(linhas && linhas.length > 4 && e.keyCode == 13) e.preventDefault();   
      }
   }
}
#ta{
   width: 12000px;
   height: 150px;
}
<textarea id="ta"></textarea>

5
  • Aqui pelo compilador do stack, eu estou conseguindo digitar caracteres ilimitado, não para na 5º linha 11/04/2019 às 14:38
  • 1
    Jovem, cada linha é contada quando vc tecla ENTER. Se vc não teclar ENTER e continuar digitando vai mudar de linha, mas na verdade é apenas 1 linha.
    – Meu ovo
    11/04/2019 às 14:41
  • Ah, me desculpe eu não sabia disso, agora faz sentido não ter conseguido em nenhuma resposta 11/04/2019 às 14:50
  • Agradeço sua resposta, não irei aceitar pois a que eu aceitei tinha feito a resposta antes e se encaixou melhor no que eu preciso, mas muito obrigado pela ajuda. 11/04/2019 às 14:52
  • Tranquilo amigo! Fico contente que tenha achado uma boa solução.
    – Meu ovo
    11/04/2019 às 14:53
1

Aqui um exemplo.
Basicamente o caractere scape de quebra de linha é o \n, então basta contar quantas quebras de linha existem. Claro que se quebrar as linhas por conta do tamanho do textarea não irá detectar...

document.getElementById('texto').addEventListener("keydown", event => {
  var texto = document.getElementById('texto').value
  
  var linhas = texto.split("\n").length;
  if (linhas > 4 && event.keyCode == 13 ) {
    event.preventDefault();
    return false;
  }
});
<textarea id='texto' rows=5 cols=20></textarea>

8
  • Talvez eu esteja errado, mas ele não para de aceitar caracteres quando ultrapassa o número de linhas 11/04/2019 às 13:57
  • ai precisa mudar um pouco então... ele está fazendo o seguinte: se tem 5 linhas não permite iniciar uma nova, por isso tem o && event.keyCode == 13, se remover isso, ele vai bloquear qualquer digitação apos 5 linhas 11/04/2019 às 14:02
  • Olha, quando colei seu código ai ele me proibiu de digitar mais, mas digitando qualquer coisa, ex: vários "a" ele não me limita, deixa eu digitar vários e vai criando mais linhas 11/04/2019 às 14:10
  • E mesmo sem remover essa parte que você falou, ele cria novas linhas 11/04/2019 às 14:11
  • Se remover essa perte, não vai permitir digitar mais nada, deve ter alguma coisa errada ai no seu teste pq testei aqui e não deixar iniciar nem mais uma linha... precisa permitir o backspace para poder editar por exemplo, vc precisa dar uma ajustada no código para as suas necessidades 11/04/2019 às 14:18
0

Boa tarde, você pode utilizar o javascript para fazer essa validação:

Ex:

function retornaLimite(){

    var coluna = document.getElementById("areaTexto").getAttribute("cols");
    var linha = document.getElementById("areaTexto").getAttribute("rows");

    var campoLimite = (coluna * linha)-linha; //Definindo o tamanho do campo

    return campoLimite;
}

Toda vez que você inserir uma letra no seu campo você pode ter um evento onKeyup, onKeyPress para somar e verificar se a quantidade é maior do que está retornando na função.

2
  • Não me funcionou, acrescentei ao textArea o seguinte: onkeypress = "return retornaLimite(this);". Está correto? 11/04/2019 às 14:15
  • function retornaLimite(element) { var coluna = element.getAttribute("cols"); var linha = element.getAttribute("rows"); var campoLimite = (coluna * linha)-linha; //Definindo o tamanho do campo return campoLimite; } Tenta assim 19/08/2019 às 15:08

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .