Maxlength not working in IE8

Question

Im using this to check the maxlength of the textarea rather than using maxlength which is not supported in IE8-9.

In IE8 if I paste a 500 byte character focus is lost on the textarea element. The character can not be selected or deleted.

How do I maintain focus on the element?

$('textarea[maxlength]').bind('keypress keydown keyup paste change', function(){
    var element = this;

    setTimeout(function() { //Get the value
        var text = $(element).val();
        var limit = $(element).attr('maxlength'); //Get the maxlength

        length = new Number(text.length); //counter increase
        counter = limit-length;
        $('#feedbackNum_counter').text(counter);

        //Check if the length exceeds what is permitted
        if (text.length > limit) {
            $(element).prop('readOnly',true);
            $(element).val(text.substr(0, limit)); //Truncate the text if necessary
            $('#feedbackNum_counter').text(0)
        }

    },1)
});

possible duplicate of [Max length of textarea is not working on IE8](http://stackoverflow.com/questions/16909063/max-length-of-textarea-is-not-working-on-ie8) — davidcondrey, Sep 30 '14 at 18:08

Mike · Accepted Answer · 2014-10-01T13:52:17.503

0

This is a simple solution.

var maxLengthTAs = $("textarea[maxlength]");

for(var i = 0; i < maxLengthTAs.length; i++)
  {
      var _textArea = $(maxLengthTAs[i]);
      var _maxLength = _textArea.attr("maxlength");
      var _testString = "";
      for(var c = 0; c < _maxLength+1; c++) _testString+=" ";
      _textArea.val(_testString);
      //Feature Detection
      
      var _test = _textArea.val();
      if(_test.length > _maxLength) {
          //if it's over the max length, the feature is not present, hook up events
          _textArea.keyup(function(){
             var _max = $(this).attr("maxlength");
             var _val = $(this).val().length;
             if(_val > _max) $(this).val($(this).val().substr(0,_max));
          });
      }
      _textArea.val("");
  }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<textarea maxlength='50' placeholder='Max 50 Characters'></textarea>

edited Oct 01 '14 at 13:52

answered Sep 30 '14 at 18:22

Mike

874
1
8
15

:This does not work in IE8..This needs to be triggered whenever there is a change...ie;backspace,paste,change,keyup,keydown...etc..How can I trigger it – user1050619 Sep 30 '14 at 19:59
When will this event be triggered..Do I need bind this function to all the events? – user1050619 Sep 30 '14 at 22:07
You can bind it to as many as you'd like, or need. The basic idea here is to feature detect the "maxlength" attribute, if the textarea/input is able to go over it's max length then we've discovered that we'll need to hook up and event to polyfill the feature. If you look at the code I wrote, it basically queries for all textareas with maxlength attribute, after that it attempts to overfill them with a string 1 character longer than it should accept, afterwards it checks to see if the length has overshot the max character limit and then setups up events accordingly. – Mike Oct 01 '14 at 13:51

Maxlength not working in IE8

1 Answers1