# Saturday, 14 November 2009
| Main | Syntax highlighting for your Blog! »

Recently, one of our ASP.Net WebForm app’s had a new requirement for formatted text entry. No problem, the HTML Editor control from the AJAX control toolkit would fit the bill nicely.

In this new version, we were asked to show the count of characters used as a user types and enforce a maximum character count allowed.  Unfortunately, the HTML Editor doesn't have anything built in to give this information and it's a conglomerate of many controls such as iframes and hidden text area's that make this a slightly less than trivial task (at least it felt that way initially).

After some thought on this and seeing a lot of great stuff from jQuery I figured it was up to the task. It didn't disappoint.  Here's what I came up with.

var Editor1 = '#Editor1';
var Editor1CountLimit = 50
var Editor1InfoArea = '#Info';

$(document).ready(function() {
  TrackCharacterCount(Editor1, Editor1CountLimit, Editor1InfoArea);
});

function TrackCharacterCount(ctl, limit, info) {
  var editor = $(ctl)contents().find('iframe').eq(1);
  $(editor).load(function() {
      var txt = $(this).contents().find('body').text();
      $(info).html(txt.length); //set initial value 
    $(this).contents().keyup(function() {
      var txt = $(this).contents().find('body').text();
      
      if (txt.length > limit)
        $(info).html(txt.length).css("color", "red");
      else
        $(info).html(txt.length).css("color", "");
     });  
   });
}

My HTML looks like this:

Info

When the document is ready we call the TrackCharacterCount function that takes the ID of the HTML Editor control, then the character limit, and last the element you want to have the character count displayed in.   Be sure to replace these parameters with your values.  

The second iframe contains the contents of the text typed.  The iframe contains a document and the text we are after is in the body tag.  I did some jQuery spelunking in firebug’s console to figure this out.  I added a little touch to have the div element turn red if the user goes over the limit passed into the function. 

In order to enforce the maximum length allowed, I set a custom validator to call the below function.

function ValidateEditor1Length(source, args) {
  var editor = $(Editor1).contents().find('iframe').eq(1);
  var txt = editor.contents().find('body').text();
  var isValid = txt.length > 0 && txt.length <= Editor1CountLimit;
    args.IsValid = isValid;
}

Some jQuery goodness I found along the way.  My first attempt at counting the characters retrieved the entire HTML (used .html()) and then removed the HTML with a regular expression.  It was a little later that I found .text() which simply returns all of the text without markup.  Thank you jQuery!!!!

Here’s a shot of what it looks like before they go over the limit:

HTMLEditor1

And after the go over the limit…

HTMLEditor2

Now, I’m not a jQuery wizard.  In fact, this is my first jQuery foray and I am extremely impressed with jQuery so far.

AjaxHtmlEditor.zip (1.28 MB)

Read my second post where I add functionality to capture the context menu’s cut and paste.

Posted 11.14.2009  #    Comments [0]  |