Word Count is a JavaScript word and character counter based on MooTools 1.3. It can count static text or text being entered into a form element, as it's being typed. It's simple to use and has been tested in IE6+, Firefox, Chrome, Opera, and Safari. You can find a full tutorial, the full API docs, and demos at the Virtuosi Media website. Also, be sure to check out the rest of our MooTools plugins.
Features
- Simple out of the box
- Unobtrusive - requires no changes to existing (X)HTML markup
- Degrades gracefully
- Cross browser - tested in Internet Explorer 6+, Firefox, Safari, Opera, and Chrome
- Customizable styling - 100% CSS styling.
- 8 configurable options
- Choose a word count, a character count, or both
- Customizable text - The outputted text can be changed according to preference or language.
Full documentation is available either on our website or in the package download. Basic usage is as follows:
HTML
<form>
<textarea name="countMe"></textarea>
<div id="target">Tell me more about yourself...</div>
</form>
CSS
body {margin:0px; padding:0px; background:#333;}
textarea {width:300px; height:60px; outline:none; margin-left:10px; border:1px solid; border-color:#000 #999 #999 #000; border-radius:10px; -moz-border-radius:10px; -webkit-border-radius:10px; padding:5px;}
#target {width:300px; height:30px; display:block; border:1px solid; border-color:#FFF #000 #000 #FFF; line-height:30px; margin:10px 10px; border-radius:10px; -moz-border-radius:10px; -webkit-border-radius:10px; padding:5px; color:#555; text-shadow:#FFF 1px 1px 1px; text-indent:5px; background: #e2e2e2; background: -moz-linear-gradient(top, #e2e2e2 0%, #dbdbdb 50%, #d1d1d1 51%, #fefefe 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#e2e2e2), color-stop(50%,#dbdbdb), color-stop(51%,#d1d1d1), color-stop(100%,#fefefe));}
JavaScript
window.addEvent('domready', function(){
var counter = new WordCount('target', {inputName:'countMe'});
});