Chanaka Blog: Limit textarea character count in IE8

After long time I'm going to start blogging again. Yes, it's on your favorite browser IE :). As you know, with HTML 5 there is lots of additional features support for major browsers except IE. However it's nice to hear that IE10 is having more support for HTML 5.

With the HTML 5, maxlength attribute was introduced for textarea HTML element. But IE 8 does not have support for this. I did some work around to find a simple solution for this and seems I found it.

Make sure you are using HTML 5 doctype. Note that I have target only IE here, but not the already support browser for maxlength attribute in teaxtarea elements.

<!DOCTYPE HTML>
<html>
  <head>
    <script type="text/javascript">
      function getCaret(el) {
        if (el.selectionStart) {
          return el.selectionStart;
        } else if (document.selection) {
          el.focus();
          var r = document.selection.createRange();
    
          if (r == null) {
            return 0;
          }
    
          var re = el.createTextRange(),
          rc = re.duplicate();
          re.moveToBookmark(r.getBookmark());
          rc.setEndPoint('EndToStart', re);
          return rc.text.length;
        }
        return 0;
      }
 
      function limitPasteData(obj, limit) {
        // Do it with Internet Explorer
        if (window.clipboardData) {
          if (document.selection && document.selection.createRange) {
            obj.focus();
            var modifiedTxtLen;
            // If text has been selected
            if (document.selection.createRange().text.length > 0) {
              modifiedTxtLen = obj.value.length - document.selection.createRange().text.length + window.clipboardData.getData("Text").length;
    
              if (modifiedTxtLen > limit) {
                var neededLen = limit - (obj.value.length - document.selection.createRange().text.length);
                document.selection.createRange().text = window.clipboardData.getData("Text").substring(0, neededLen);
                return false;
              }
            } else {
              modifiedTxtLen = obj.value.length + window.clipboardData.getData("Text").length;
              if (modifiedTxtLen > limit) {
                var neededLen = limit - obj.value.length;
                var neededTxt = window.clipboardData.getData("Text").substring(0, neededLen);
                var mofifiedText = obj.value.substring(0, getCaret(obj)) + neededTxt + obj.value.substring(getCaret(obj), obj.value.length);
                obj.value = mofifiedText;
                return false;
              }
            }
            // If not exceed limit just paste it
            return true;
          }
        }
      }
    
      function limitTypingData(obj, limit) {
        // Other browsers may have support for maxlength attribute
        if (navigator.appName == 'Microsoft Internet Explorer') {
          if (obj.value.length > (limit - 1)) {
   
            if (document.selection && document.selection.createRange) {
              obj.focus();
              // If only text has been selected, allow to type once
              if (document.selection.createRange().text.length > 0) {
                return true;
              }
            }
            return false;
          }
        }
      }
    </script>
  </head>
  <body>
    <textarea id="txtArea" cols="20" rows="5" maxlength="15"
        onpaste="return limitPasteData(this, 15);"
        onkeypress="return limitTypingData(this, 15);" ></textarea>
  </body>
</html>

But remember that the behavior of these functions in IE8 will not 100% equal to default maxlength behavior of supporting browsers. But we can still do the work with this.

Apart from that I would like to notice you that, new line character(s) may be changed in IE than others. IE always take it as '\n\r' and other browsers may take it as '\n'. So that, either you have to handle that or use additional space from the back end database fields.

Have a fun with IE 8 :D

Chanaka Blog

Tuesday, January 8, 2013

Limit textarea character count in IE8

10 comments: