For the sake of demonstration I made a list called quotes. Each quote has a title, body and author field, as a requirement the body field should not have more than 200 characters. So to let users know when they are getting close to the character limit we will setup a character count script.
For this solution I will use this jQuery script from CSS Globe.
So first off we need to add a link to the jQuery script and the plugin. You can do this using a content editor web part but I have noticed in some cases scripts need to be in the section of the page. The easiest way to add the scripts to the of the page is to use the following code.[sourcecode language=”html”] <asp:Content ContentPlaceHolderID="PlaceHolderAdditionalPageHead" runat="server">
<!—scripts / css goes in here — >
allowed: 200, //maximum number of characters allowed
warning: 175, // when to show the warning
counterText: ‘Characters left:’ //text before the character count
For more configuration options and explanations of the plugin check out this page.
I used the following CSS to style the appearance of the character count text.
border:1px solid #888;
In the next part of this series we will add hints to the form fields and make some other improvements.