Auto delete text on textarea

Question

How can I delete automatically the text on a textarea if the text line exceed more than 100? I want to do this because it slow down the browser.

HTML:

<div class="form-group">
<textarea class="form-control" id="text" wrap="off"
placeholder="Autodelete the text here if value exceed more than 100!"></textarea>
</div>

Answer 1

This is what i would propose to do, which may be good to really keep it safe on the range.

let text = document.getElementById('text'); //Select your textarea
text.addEventListener("keyup" (e)=> {
    //Make it listen to a keyup event
    //So if someone left a key pressed, the screen will show the slice happening
    if (e.target.value.length > 100) e.target.value = e.target.value.slice(0,100);
    //Then, if its value exceeds 100 length, use slice method which create a new string
    //So, as it creates a new string you save it with assign operator
});

I hope that solves your problem. Let me know if you need clarify something.

Answer 2

document.getElementById('text').onkeyup = function () {
 console.log('text', this.value.length)
 if (this.value.length > 100) {
  this.value = '';
 }
};

<div class="form-group">
<textarea class="form-control" id="text" wrap="off"
placeholder="Autodelete the text here if value exceed more than 100!"></textarea>
</div>

You can try like this with using normal javascript.

Answer 3

Use maxlength for maximum character.

maxlength="nuber_of_characters"

<div class="form-group">
<textarea class="form-control" id="text" maxlength="100" 
wrap="off" placeholder="Autodelete the text here if value 
exceed more than 100!"></textarea>
</div>

Note: if you want to delete the whole text then do with js to count length and empty the whole text. Ref: Count textarea characters

Answer 4

Your can simply use maxlength attribute and put the value to 100

<textarea class="form-control" id="text" wrap="off" maxlength=100
placeholder="Autodelete the text here if value exceed more than 100!"> 
</textarea>

If that does't work then - You first need to add javascript function in which the length of textarea value is being calculated after that when the value becomes > 100 disable the textarea so that the user can't add more.

document.getElementById('text').onkeyup = function () {
     console.log('text', this.value.length)
     if (this.value.length > 100) {
         alert('Limit exceeded to '+this.value.length)
      this.disabled = true;
     }
    };


<div class="form-group">
   <textarea class="form-control" id="text" wrap="off"
   placeholder="Autodelete the text here if value exceed more than 100!"> 
   </textarea>
</div>

There is a dark side of this code that if the user is spamming continously the if condition won't be triggered. When the user stops after long press the textarea will get disabled.

Answer 5

You can set the maxlength attribute to 100 like -

<textarea class="form-control" id="text" wrap="off" maxlength=100
placeholder="Autodelete the text here if value exceed more than 100!"> 
</textarea>

This wont allow user to enter more then 100 words