bootstrap-limit
Inspired by twitter.com's tweet character countdown functionality
Getting Started
- Download zipball of latest release.
- Download latest bootstrap-limit.js or bootstrap-limit.min.js.
Note: bootstrap-limit has a dependency on jQuery 1.9+, which must be loaded before bootstrap-limit.
Examples
For some working examples of bootstrap-limit, visit our examples page.
Features
Usage
API
jQuery#limit
Update the given counter for any input
or textarea
element
$('input.limit').limit({
counter: "#selector"
});
Options
The list of all options and their default values
Name | Type | Default | Description |
---|---|---|---|
maxLength | number | 140 | The max number of characters that is allowed. Default value will be overriden with the element's maxlength attribute, and both will be overriden with the given option |
counter | jquery selector | blank | The jquery selector of the element which shows the counter. Default is blank which means no counter is displayed |
removeMaxLengthAttr | boolean | false | Whether or not removing the maxlength attribute of the input/textarea |
threshold | number | 10 | The number of characters left before counter's color get changed |
color | css color | 'red' | The color to which counter will be changed after number of remaining characters less than threshold |
Custom Events
bootstrap-limit triggers the following custom events:
bootstrap-limit:initialized
– Triggered after initialization.bootstrap-limit:crossed
– Triggered when the number of characters inside input/textarea crossed its allowed max length.bootstrap-limit:uncrossed
– Triggered when the number of characters inside input/textarea uncrossed its allowed max length.
Browser Support
- Chrome
- Firefox 3.5+
- Safari 4+
- Internet Explorer 7+
- Opera 11+
Issues
Discovered a bug? Please create an issue here on GitHub!
https://github.com/trongrg/bootstrap-limit/issues
Versioning
For transparency and insight into our release cycle, releases will be numbered with the follow format:
<major>.<minor>.<patch>
And constructed with the following guidelines:
- Breaking backwards compatibility bumps the major
- New additions without breaking backwards compatibility bumps the minor
- Bug fixes and misc changes bump the patch
For more information on semantic versioning, please visit http://semver.org/.
Testing
Tests are written using Jasmine. To run the test suite with PhantomJS, run $ grunt test
. To run the test suite in your default browser, run $ grunt test:browser
.
Developers
If you plan on contributing to bootstrap-limit, be sure to read the contributing guidelines.
In order to build and test bootstrap-limit, you'll need to install its dev dependencies ($ npm install
) and have grunt-cli installed ($ npm install -g grunt-cli
). Below is an overview of the available Grunt tasks that'll be useful in development.
-
grunt build
– Builds bootstrap-limit from source. -
grunt lint
– Runs source and test files through JSHint. -
grunt test
– Runs the test suite with PhantomJS. -
grunt test:browser
– Runs the test suite in your default browser. -
grunt watch
– Rebuilds bootstrap-limit whenever a source file is modified. -
grunt server
– Serves files from the root of bootstrap-limit on localhost:8888. Useful for using test/playground.html for debugging/testing. -
grunt dev
– Runsgrunt watch
andgrunt server
in parallel.
Authors
- Trong Tran (GitHub)
Shoutouts!
Thanks for assistance and contributions:
License
Copyright 2013 TrongTran, Inc.
Licensed under the MIT License