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 People

Stargazers

Watchers

Forkers

bansicloud freshy969 ximoprofe umarmughal koffus sankam-nikolya francishero evandiamond kenzhougreat

short-and-sweet's Issues

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>

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>

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.

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 = '';
    })

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';

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?

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!

rikschennink / short-and-sweet Goto Github PK

short-and-sweet's People

Stargazers

Watchers

Forkers

short-and-sweet's Issues

Add character limit in label

It works for Textarea but not Input field.

Hide alert for specific elements

How to use this for many modals?

Hello

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

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

Recommend Projects

React

Vue.js

Typescript

TensorFlow

Django

Laravel

D3

Recommend Topics

javascript

web

server

Machine learning

Visualization

Game

Recommend Org

Facebook

Microsoft

Google

Alibaba

D3

Tencent