Improving #SharePoint Forms – Character Count

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.

The default form

Setup

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.

<asp:Content ContentPlaceHolderID="PlaceHolderAdditionalPageHead" runat="server">
<!—scripts / css goes in here -- >
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.1/jquery.min.js">
  </script>
  <script type="text/javascript" src="js/charCount.js"></script>
</asp:Content>

So once you have all the scripts you need on the page we just need to attach the behavior to the form body form field. To do this we can add some JavaScript to the page in a Content Editor web part. We can use jQuery to select the element we want to target and then configure the plugin settings.

<script type="text/javascript">

$("textarea[title='Body']").charCount({
    allowed: 200,	 //maximum number of characters allowed
    warning: 175,  // when to show the warning
    counterText: 'Characters left:'  //text before the character count
});
</script>

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.

.counter{
	position:relative;
	right:14px;
	top:0;
	font-size:12px;
	font-weight:normal;
	color:#555;
	float:right;
	clear:both;
	display:block;
	text-align:right;
	background:#fff;
	width:150px;
	padding:3px;
	border:1px solid #888;
	border-top:0px;
	margin-top:-1px;
	}
.warning{color:#660000; font-weight:bold;}
.exceeded{color:#e00; font-weight:bold;}

In Action

In Action

Too many characters

In the next part of this series we will add hints to the form fields and make some other improvements.

Related posts:

1. Improving #SharePoint Forms – Watermarks
2. Improving #SharePoint Forms
3. Improving #SharePoint Forms – Hints