Update #1: I made a small performance change. Now instead of calling the counter 4 times for each keypress it only gets called once. This should help with speeding up typing and should mostly render the delay feature nearly useless. I haven’t fully tested on all browsers though so let me know if you find something. When i’m finished building my feature I will begin testing on all browsers. If i find anythign then I will post again.
Tom Deater from http://www.tomdeater.com/jquery/character_counter/ wrote a nice little plugin for jquery to count the characters of a textbox and limit it to a certain count. Obviously this is just a front end check and a check should also be performed on the back end. In any case his plugin did just about everything we needed it to, here is a quick run down of what he had:
- handles mouse paste/cut
- handles ctrl+ cut and paste
- handles text as typing
- an optional delay for use with large complex pages
- flashing output div
- appends span if container not specified
- configurable output
This was about everything we needed, except we prefer that if you hit your max character count then any keypress should be canceled. This makes it so that a character never shows up and then is quickly removed, as was the case. There are exceptions, you still need to be able to delete characters and use your basic ctrl shortcuts. So we made a small mod, here are the changes:
- List of keys (or key combination’s) that work after max char hit
- ctrl+a
- ctrl+z
- ctrl+x
- ctrl+c
- left arrow
- right arrow
- up arrow
- down arrow
- delete
- backspace
- All other keys are canceled when character count is reached
So that’s basically it.
You can sign up for our website and comment on a recipe (i’m still developing it so depending on when you read this you may not see the option to) to see a demo.
Click here to download it.
To find out more details or to use a demo without signing up for our site (our site is free by the way, and we have lots of other jquery and jquery ui implementations) you can check out the original sites link. It behaves nearly identical to that.