0
I have the following code snippet :
@Html.TextAreaFor(model => model.men_mensagem, new { @cols = Model.Men_caracteres, @rows = Model.Men_linha })
I define the number of lines, but that’s just for display, right? I would like to limit, ex: finished line 6, can not type anything else, as if it were a maxLength, only instead of characters, limit by line. Is there any way to do this?
2
You can use javascript to block the number of rows and columns, follow a practical example along with MVC:
Example:
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>His Textarea:
@Html.TextAreaFor(model => model.men_mensagem, new { @cols = "5", @rows = "5", @onkeypress = "return limitarTextArea(this);" })
Maybe I’m doing something wrong, but all the answers allow me to create unlimited lines
Here it works perfectly, try to test by changing the Model.Men_characters and Model.Men_line for a fixed value. Ex: Rows = "5", cols = "5".
I put it in the compiler here in the stack, take a look if that’s what you want.
Almost that man, the only problem there is that it stops in the 5th character, and I would like it to be in the 5th line
It also stops at the 5° line
I didn’t know that if I kept typing without typing enter, it considered a line, now it worked
Thanks for the help!
If I helped you, I’d appreciate it if you’d mark it as an answer.
Yes, it’s marked, thank you very much
2
Maybe using the .readyState, the code will wait for the page to be fully loaded to apply the functions. Thus, you can use Regex /\n/g to count the number of lines and prevent more than 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>Here by the stack compiler, I’m getting to type unlimited characters, not stop at the 5th line
Young, each line is counted when vc key enter. If u do not hit enter and continue typing will change line, but actually is only 1 line.
Ah, I’m sorry I didn’t know that, now it makes sense that I didn’t get any answers
I appreciate your reply, I will not accept because the one I accepted had made the answer before and fit better in what I need, but thank you very much for the help.
Quiet friend! I’m glad you found a good solution.
1
Here an example.
Basically the line break scape character is the \n, then just count how many line breaks there are. Of course if you break the lines because of the size of the textarea will not detect...
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>Maybe I’m wrong, but he won’t stop accepting characters when he exceeds the number of lines
ai needs to change a little then... he is doing the following: if it has 5 lines does not allow to start a new, so has the && event.keyCode == 13, If you remove this, it will block any typing after 5 lines
Look, when I pasted his code there he forbade me to type more, but typing anything, ex: several "a" he does not limit me, let me type several and will create more lines
And even without removing that part you spoke of, it creates new lines
If you remove this piece, it will not allow you to type anything else, there must be something wrong there in your test pq tested here and not let start one more line... you need to allow Backspace to be able to edit for example, you need to adjust the code for your needs
Seriously, you’re testing by where, I tested here by the same stack
If you want to start a chat for me to show you
I’m sorry for my lack of knowledge, but I didn’t know I had to press enter to go to the next line, I appreciate the answer, I will accept the other because it fits better in what I need, but thank you
0
Good afternoon, you can use javascript to make this validation:
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;
}
Every time you insert a letter in your field you can have an onKeyup event, onKeyPress to add and check if the amount is greater than what is returning in the function.
It didn’t work for me, I added the following to the textarea: onkeypress = "Return returnLimite(this);". It’s correct?
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;
}
Browser other questions tagged html textarea
You are not signed in. Login or sign up in order to post.
the element
textareano support for this, need to do with javascript. using some event, typekeypress,keydown, etc and count the lines to limit– Ricardo Pontual
Gee, that’s too bad, it seems a bit complicated kk, but I’ll try, thank you
– Jeff Henrique
Do you know any element that supports this?
– Jeff Henrique
does not exist, but you can use javascript for this... see the example below I put
– Ricardo Pontual