Warning: This blog entry was written two or more years ago. Therefore, it may contain broken links, out-dated or misleading content, or information that is just plain wrong. Please read on with caution.
I am currently working on new features for this site, but I wanted to put something up. So today I am going to cover a simple little JQuery script that I installed in my blog entry system. Anyone with more than basic knowledge of JQuery can skip this one.
When creating my blogs I do a couple of things for SEO. One of those things is to ensure that my blog title is not longer than 70 characters. I dont make this a hard rule only a guideline. To save me having to count the characters manually or using a document editor like Word, I wrote a simple JQuery script to count the characters and apply some styling when I go over the character limit.
Step 1: Create a Display Container
In order to display the characters count, create a span next to the "Blog Title" input field and give it an id of "countChars".
<input type="text" name="blogTitle" id="blogTitle" /><span id="countChars"></span>
Step 2: Count the characters in the input field on keyup
The next step is a simple matter of adding a keyup listener to the blogTitle input which counts the number of characters and outputs it to the display container.
//every time user types in the blogTitle input field do the following
//get the length of the input text value
var charLength = $(this).val().length;
//set the inner html of chountChars equal to charLength