2

Using the below code, any input exceeding the specified maximum is removed. But this creates an effect where a character is typed and then immediately removed. I would prefer to simply prevent characters from being inputted.

<textarea  id="textarea" onKeyDown="limitText()" onKeyUp="limitText()">
</textarea> 
<span name="charcount_text" id="charcount_text"></span>

  <script type="text/javascript">
    function limitText() {
      var count = document.getElementById('textarea').value.length;
      var remaining = 4000 - count;
      if(remaining <= 0) {
        document.getElementById('charcount_text').innerHTML = '4000 character limit reached.' ;
        document.getElementById('textarea').value = document.getElementById('textarea').value.substring(0, 4000);
      } else if(remaining <= 50) {
        document.getElementById('charcount_text').innerHTML = '4000 character limit, ' + remaining  + ' remaining.';
      } else {
        document.getElementById('charcount_text').innerHTML = '';
      }
    }
  </script>
ab11
  • 19,770
  • 42
  • 120
  • 207
  • 2
    possible duplicate of [textarea character limit](http://stackoverflow.com/questions/5533053/textarea-character-limit) – Paul Roub May 06 '15 at 21:44
  • Also possible duplicate of http://stackoverflow.com/questions/3578678/how-can-i-block-further-input-in-textarea-using-maxlength – Leo Farmer May 06 '15 at 21:46
  • possible duplicate of [Prevent user from writing more than N characters in a textarea using Prototype event observers](http://stackoverflow.com/questions/1540284/prevent-user-from-writing-more-than-n-characters-in-a-textarea-using-prototype-e) – Alex Pan May 06 '15 at 21:47

2 Answers2

10

Use the maxlength attribute:

<textarea  id="textarea" maxlength="4000" onkeyup="limitText()"></textarea>

function limitText() {
  var ta= document.getElementById('textarea'),
      count= ta.value.length,
      ml= ta.maxLength,
      remaining= ml - count,
      cc= document.getElementById('charcount_text');

  if(remaining <= 0) {
    cc.innerHTML = ml+' character limit reached.' ;
  } else if(remaining <= 50) {
    cc.innerHTML = ml+' character limit, ' + remaining  + ' remaining.';
  } else {
    cc.innerHTML = '';
  }
}

Fiddle

Rick Hitchcock
  • 35,202
  • 5
  • 48
  • 79
  • when running the fiddle in Chrome, enter some white spaces (press enter) the count shows that 8 remaining but you cannot enter any more letters. – Parik Tiwari Dec 01 '16 at 00:39
  • @ParikTiwari: Interesting! Chrome treats a new line as two characters in the `maxlength` logic, but only as one in `value.length`. IE and Firefox don't have this issue. Seems like a Chrome-specific bug. – Rick Hitchcock Dec 01 '16 at 11:01
  • Related: http://stackoverflow.com/questions/10030921/chrome-counts-characters-wrong-in-textarea-with-maxlength-attribute – Rick Hitchcock Dec 01 '16 at 11:05
1

Try this

$.fn.lenghtLimit = function(numLimit) {
  var currentEle = $(this);

  function main() {
    var getCurrentVal = currentEle.val();
    if (getCurrentVal.length > numLimit) {
        currentEle.val(getCurrentVal.substring(0, numLimit));
    }
  }
  $(document).on("keyup", currentEle, main);
}

// call method here with number limit
$("#numberInput").lenghtLimit(10);

You can limit any input or textarea value length using this https://jsfiddle.net/akalankaimesh/7hkagewh/

Akalanka Imesh
  • 56
  • 5