rikschennink / short-and-sweet Goto Github PK

View Code? Open in Web Editor NEW

277.0 5.0 10.0 272 KB

📟 Accessible character counter for input elements

License: MIT License

JavaScript 100.00%

character-counter textarea input accessible screenreader javascript

short-and-sweet's Introduction

Short and Sweet, Accessible Character Counter

Tested with VoiceOver (Safari 11) & NVDA (FF 60)

Tells user the amount of space left when the field is focussed
Updates the user periodically while typing

Play around with the demo:

https://codepen.io/rikschennink/pen/LmoJYY

View a video of Short and Sweet with VoiceOver:

http://www.youtube.com/watch?v=3NDCEvHHaCY (sound is off)

Buy me a Coffee / Dev updates on Twitter

Features

No dependencies
Easy setup
Accessible

Installation

Install from npm:

npm install short-and-sweet --save

Or download dist/short-and-sweet.min.js and include the script on your page like shown below.

Usage

Run short-and-sweet like shown below and pass an element reference or a querySelector. For best performance include the script just before the closing </body> element.

<textarea maxlength="200"></textarea>

<script src="short-and-sweet.min.js"></script>
<script>
    shortAndSweet('textarea', {
        counterClassName: 'my-short-and-sweet-counter',
    });
</script>

The following options are available to pass to the shortAndSweet method.

Option	Default	Description
`counterClassName`	`'short-and-sweet-counter'`	The classname of the counter element
`counterLabel`	`'{remaining} characters left'`	The text shown in the counter element, placeholders available are `{remaining}`, `{maxlength}`, `{length}`
`assistDelay`	`2000`	The time in milliseconds the assist waits before updating the user with the screenreader user with the current count
`append`	`(el, counter) => { el.parentNode.appendChild(counter); }`	The method used to append the element to the DOM

Tested

Modern browsers
VoiceOver + Safari
NVDA + Firefox
IE 10+

Versioning

Versioning follows Semver.

License

MIT

short-and-sweet's People

Contributors

Stargazers

Watchers

Forkers

bansicloud freshy969 ximoprofe umarmughal koffus sankam-nikolya francishero evandiamond kenzhougreat

short-and-sweet's Issues

How to use this for many modals?

So I have modals that open up when the user clicks on the edit button of the data and the character count for each modal text area are different but the counter shows the same till onkeyup event is emitted.

This is the way I open multiple modal:

$(document).on('click', '.cc_edit', function(e) {
            e.preventDefault();

            document.getElementsByTagName('html')[0].style.overflow = 'hidden';
            document.getElementsByTagName('body')[0].style.overflowY = 'scroll';

            const command = $(this).attr('data-command');
            const response = $(this).attr('data-response');
            const deletable = $(this).attr('data-deleteable');
            const dm = $(this).attr('data-dm');

            $("#cc_edit #command_name").val(command)
            $("#cc_edit #old_command_name").val(command)
            $("#cc_edit #command_response").val(response)
            if(deletable == "true") {
                $("#cc_edit #delete_command").prop("checked", true)
            } else {
                $("#cc_edit #delete_command").prop("checked", false)
            }

            if(dm == "true") {
                $("#cc_edit #dm_response").prop("checked", true)
            } else {
                $("#cc_edit #dm_response").prop("checked", false)
            }

            $('#cc_edit').modal('toggle')
    });

On closing the modal:

$(document).on("hidden.bs.modal", "#cc_edit", function(e) {
        document.getElementsByTagName('html')[0].style.overflow = '';
        document.getElementsByTagName('body')[0].style.overflowY = '';
    })

Hide alert for specific elements

Hi,

First of all, Thank You for the wonderful library. I am planning to use the same in my project. But I wish I could hide/not show the counter for some specific elements which have maxlength attribute.

I am initializing using shortAndSweet('textarea, input'). Is there any data-attribute for not showing the counter.

Thanks in advance.

Could be added a setting that allow to "overflow" the max characters in "maxlength"?

In summary: there are many fields where it is necessary to indicate the maximum number of "recommended" characters without however blocking the insertion of a greater number of characters, allowing to overflow.

Is there a way to set the counter and not make it become the "max limit" of the field?

Maybe you can add an "option" that, if it is enabled or disabled, do a true limit or allow to "overflow" the maxlength setting.

Thanks a lot!

Add character limit in label

First off, thanks for great script!

A suggestion, could you add the max character limit to the label and only start announcing the remainder when the user starts typing?

<label for="my-textarea">My textarea (Maximum 160 characters)</label>
<textarea id="my-textarea" maxlength="160" data-counter-label="Still {remaining} characters left to type" aria-controls="short-and-sweet-counter-0"></textarea>
<span class="short-and-sweet-counter" aria-hidden="true">Still 160 characters left to type</span>
<span style="position:absolute;overflow:hidden;height:1px;width:1px;padding:0;border:0;clip:rect(1px, 1px, 1px, 1px);clip-path:inset(50%);white-space:nowrap;" id="short-and-sweet-counter-0" role="status" aria-live="polite"></span>

The counter does not updates when triggering an "input" event

TL;DR; How to force an update/refresh of the counter from a script?

I have an input where I added the shortAndSweet counter. It works fine except when I change the input's content/text via JavaScript: the counter does not updates. I have to manually enter a character for it to reflect the actual count.

By looking at short-and-sweet.js I can it listens to 'input' JavaScript event so I should be able to force an update using jQuery.trigger('input').

It does not work: the input's content changes but the counter stays at the same value.

Here is an example
https://jsfiddle.net/ecudkh5j/

Is there a way to achieve this?

It works for Textarea but not Input field.

Hello, I tried to replicate the code from this link. It works by counting for the Textarea field but not for the Input field. Any way around it?

<body>
	<p>
		<label for="my-textarea">My textarea</label>
		<textarea id="my-textarea" maxlength="160" 
                       data-counter-label="Still {remaining} characters left to type">
                </textarea>
	</p>
	<p>
	        <label for="my-text-field">My input</label>
		<input id="my-text-field" type="text" maxlength="30"/>
	</p>

    <script type="text/javascript" src="short-and-sweet.min.js"></script>
	<script>shortAndSweet('textarea', 'input')</script>
  </body>

Hello

I keep getting this issue after importing the module:
import shortAndSweet from 'short-and-sweet'
Could not find a declaration file for module 'short-and-sweet'. '/path/short-and-sweet/dist/short-and-sweet.module.js' implicitly has an 'any' type.
Try npm install @types/short-and-sweet if it exists or add a new declaration (.d.ts) file containing declare module 'short-and-sweet';