Question

I have seen plenty of code snippets to force a <Textarea> to have only X number of characters and then not allow anymore. What I am in need of is a <Textarea> where you can specify how many characters I can have at one time at most. Almost like a max buffer size. Think of it like a rolling log file. I want to always show the last/newest X number of characters.

Simpler the solution the better. I am not a web expert so the more complicated it gets the more greek it looks to me. 🙂

I am already using jQuery so a solution with that should be ok.

Answer 1

try this:

<textarea id="yourTextArea" data-maxchars="1000"></textarea>

var textarea = document.getElementById('yourTextArea');

var taChanged = function(e){       
   var ta = e.target;
   var maxChars = ta.getAttribute('data-maxchars');
   if(ta.value.length > maxChars){
      ta.value = ta.value.substr(0,maxChars);
   }
}
textarea.addEventListener('change', taChanged, 1);

for the last chars:

 ta.value = ta.value.substr(ta.value.length - 1000);