Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/websanova/wChar

jQuery character counter plugin
https://github.com/websanova/wChar

Last synced: 2 months ago
JSON representation

jQuery character counter plugin

Host: GitHub
URL: https://github.com/websanova/wChar
Owner: websanova
Archived: true
Created: 2012-08-16T03:19:24.000Z (over 12 years ago)
Default Branch: master
Last Pushed: 2013-08-13T16:06:59.000Z (over 11 years ago)
Last Synced: 2024-10-12T07:21:09.884Z (3 months ago)
Language: JavaScript
Size: 357 KB
Stars: 44
Watchers: 5
Forks: 6
Open Issues: 1
Metadata Files:
- Readme: README.md

Awesome Lists containing this project

README

# wChar.js

A jQuery plugin for `textarea`, `text` and `password` inputs to add a character counter bubble that fades in while you type and fades out when you stop typing.

* [View the wChar demo](http://wchar.websanova.com)
* [Download the lastest version of wChar](https://github.com/websanova/wChar/tags)

## Related Plugins

* [wForm](http://wform.websanova.com) - See all the form plugins working together.
* [wSelect](http://wselect.websanova.com) - Custom select boxes.
* [wInput](http://winput.websanova.com) - Input plugin that handles backwards compatability for placeholders.
* [wCheck](http://wcheck.websanova.com) - Radio and checkbox input plugin.

## Settings

Available options with notes, the values here are the defaults.

```js
$.fn.wChar.defaults = {
theme: 'classic', // set theme
position: 'tr', // position of character bubble (tl,tc,tr,rt,rm,rb,br,bc,bl,lb,lm,lt)
opacity: 0.9, // set opacity of counter bubble
showMinCount: true, // display count down for min characters
min: 0, // min default
max: 100, // max default
fadeIn: 500, // bubble fade in speed
fadeOut: 500, // bubble fade out speed
delayIn: 0, // delay after start typing before bubble fades in
delayOut: 2000 // delay after stop typing before bubble fades out
message: '', // if set will display a message along side max number of characters
messageMin: '' // if set will display a message along side min number of characters
};
```

## Examples

Include the following files:

```js

```

You can then apply the plugin to any input `text`, `password` and `textarea` elements using the jQuery selector function:

```js
$('input:text, input:password, textarea').wChar();
```

### length

Set the minlength and maxlength using data attributes `data-minlength` and `data-maxlength`. Note that the minlength is optional and not required. Also if you do not set a `maxlength` a default from the options will be used.

```html

```

### message

You can also optionally set a message a `min` and `max` message that will appear next to the character count while typing. Where `message` is the number of characters remaining and `messageMin` is the minimum number of characters required.

```js
$('input:text, input:password, textarea').wChar({
message: 'left',
messageMin: 'to go'
});
```

## Grunt.js

If you want to use Grunt you will need to install the required plugins locally using `npm install` in the root folder of your project. If you need to setup Grunt on your system you can follow my [Setting up Grunt.js](http://www.websanova.com/blog/javascript/how-to-setup-grunt) guide.

## Resources

* [More jQuery plugins by Websanova](http://websanova.com/plugins)
* [Websanova JavaScript Extensions Project](http://websanova.com/extensions)
* [jQuery Plugin Development Boilerplate](http://wboiler.websanova.com)
* [The Ultimate Guide to Writing jQuery Plugins](http://www.websanova.com/blog/jquery/the-ultimate-guide-to-writing-jquery-plugins)

## License

MIT licensed