Skip to main content

Overview

jQuery plugin Simplest Twitterlike dynamic character count for textareas and input fields.

About charCount

The first thing that this plugin do is create a sibling element (it adds is immediately AFTER the form element), the “counter”, where the remaining character info is stored. On each key up event or text field value change the counting function is triggered and the contents of this “counter” element is changed accordingly. If the remaining character count reaches the “warning” zone (gets close to zero) the CSS class is added. We use this class to change the color of the character count info. If the count reaches zero and goes beyond it another class is added so we can use another style for exceeding the limit.

Just so you can find your way around it, this is the code that the plugin generates by default:

<span class="counter">140</span>

Plugin Options (and default values)

limit: 140

The character limit you wish to set for your text area or input field. It must be a number.

warning: 25

When remaining characters reach the number set with this option the “warning” css class name will be applied to the counter element.

counterElement: ‘span’

The type of element you wish to choose as your “counter” element. By default it is a SPAN element, but you can use paragraphs, divs, strongs, ems…

css: ‘counter’

Class name added to the counter element. Use this class name as a css selector to describe element’s appearance.

cssWarning: ‘warning’

Class name added to the counter element once the character count reaches the “warning” number.

cssExceeded: ‘exceeded’

Class name added to the counter element once the character count reaches zero.

counterText: ‘’

If you wish to add some text before the remaining character number, you can do so by using this option. It is empty by default.

Here’s what default usage code looks like:

$("#message1").charCount();

…and this is the plugin usage with some customized options:

$("#message2").charCount({
    allowed: 50,
    warning: 20,
    counterText: 'Characters left: '
});

Also take a look at the CSS I used for my demos:

form .counter{
    position:absolute;
    right:0;
    top:0;
    font-size:20px;
    font-weight:bold;
    color:#ccc;
}
form .warning{color:#600;}
form .exceeded{color:#e00;}

How to install

This addon can be installed as any other Plone addon. Please follow official documentation.

After installing the package on your portal you can access the demo in: http://youportal.com/++resource++collective.js.charcount.demo.html

Have an idea? Found a bug? Let us know by opening a support ticket.

Mostly Harmless

https://secure.travis-ci.org/collective/collective.js.charcount.png

Installation

  • When you’re reading this you have probably already run easy_install collective.js.charcount. Find out how to install setuptools (and EasyInstall) here: http://peak.telecommunity.com/DevCenter/EasyInstall

  • Get pythonproducts and install it via:

    python setup.py install --home /path/to/instance

    into your Zope instance.

  • Create a file called collective.js.charcount-configure.zcml in the /path/to/instance/etc/package-includes directory. The file should only contain this:

    <include package="collective.js.charcount" />

Alternatively, if you are using zc.buildout and the plone.recipe.zope2instance recipe to manage your project, you can do this:

  • Add collective.js.charcount to the list of eggs to install, e.g.

    [buildout]
    ...
    eggs = collective.js.charcount
  • Tell the plone.recipe.zope2instance recipe to install a ZCML slug:

    [instance]
    recipe = plone.recipe.zope2instance
    ...
    zcml = collective.js.charcount
  • Re-run buildout, e.g. with:

    $ ./bin/buildout

You can skip the ZCML slug if you are going to explicitly include the package from another package’s configure.zcml file.

After updating the configuration you need to run ‘’bin/buildout’’, which will take care of updating your system.

Go to the ‘Site Setup’ page in a Plone site and click on the ‘Add-ons’ link.

Check the box next to collective.js.charcount and click the ‘Activate’ button.

Note: You may have to empty your browser cache and save your resource registries in order to see the effects of the package installation.

Contributors

  • Cleber J. Santos

Changelog

1.0 (unreleased)

  • Initial release

Release files for collective.js.charcount 1.1

For a detailed explanation of source distributions (sdists) and built distributions (wheels), please see the package formats documentation.

Source distribution (sdist)

Source distribution for collective.js.charcount 1.1
File Size Uploaded
collective.js.charcount-1.1.zip 27.2 kB Details

Release files / collective.js.charcount-1.1.zip

Download URL collective.js.charcount-1.1.zip
Size 27.2 kB
Tags Source
SHA-256 checksum
How to use checksums
adff5d0a960b0873d80db77315703410b69f13893054c7ba8324cafd1e22cbf1
BLAKE2b-256 checksum
How to use checksums
7983796b3a9c9eb6eca8dda9f4fcba9f124c54ffb4201443e1932db924631801
Upload date
Uploaded using Trusted Publishing?
What is trusted publishing?
No

Release history Release notifications | RSS feed

This release

1.1 This release

1 release file

Anthropic, PBC Visionary sponsor Bloomberg Visionary sponsor Hudson River Trading Visionary sponsor Meta Visionary sponsor NVIDIA Visionary sponsor Microsoft Sustainability sponsor Depot Continuous Integration AWS Cloud computing and Security Sponsor Datadog Monitoring Fastly CDN Google Download Analytics Sentry Error logging StatusPage Status page