rikschennink / Short And Sweet
Licence: mit
📟 Accessible character counter for input elements
Stars: ✭ 261
Programming Languages
javascript
184084 projects - #8 most used programming language
Labels
Projects that are alternatives of or similar to Short And Sweet
angular2-stretchy
angular2-stretchy is an Angular2 directive that automatically adjusts input width to fit content.
Stars: ✭ 12 (-95.4%)
Mutual labels: input
tom-select
Tom Select is the hybrid of a textbox and select box. Forked from selectize.js to provide a framework agnostic autocomplete widget with native-feeling keyboard navigation. Useful for tagging, contact lists, etc.
Stars: ✭ 520 (+99.23%)
Mutual labels: input
IwEngine
This is an engine that I initially started building after taking a game coding class in high school. I didn't like Unity so tried to make something more code focused that was personally easier to use.
Stars: ✭ 97 (-62.84%)
Mutual labels: input
AutoInteraction-Library
Android仿真人机交互开源库，包括自动化模拟点击指定控件、模拟滚屏等
Stars: ✭ 50 (-80.84%)
Mutual labels: accessible
NonEmptyCollections
A type-safe implementation for collections that cannot be empty. Life is too short for emptiness-checks!
Stars: ✭ 45 (-82.76%)
Mutual labels: input
ember-phone-input
An Ember.js component to handle international phone numbers
Stars: ✭ 22 (-91.57%)
Mutual labels: input
input-event
🎹 Read and parse input device(like mouse, keyboard, joystick and IR-Remote)'s event data.
Stars: ✭ 45 (-82.76%)
Mutual labels: input
vue-input-streaming
A Vue2 Input Streaming RealTime And Two Way Data Binding Broadcasting with Pusher
Stars: ✭ 24 (-90.8%)
Mutual labels: input
react-native-input-bar
Fully customizable, beautifully designed Input Bar for React Native
Stars: ✭ 32 (-87.74%)
Mutual labels: input
pygame-text-input
a small module that enables you to input text with your keyboard using pygame
Stars: ✭ 114 (-56.32%)
Mutual labels: input
svelte-search
Accessible, customizable Svelte search component
Stars: ✭ 17 (-93.49%)
Mutual labels: input
react-input-hints
Get more out of your placeholders. Animates input placeholders to make it look like they are being typed in realtime - https://npmjs.com/react-input-hints
Stars: ✭ 56 (-78.54%)
Mutual labels: input
LowLevelInput.Net
A thread safe and event driven LowLevelMouse and LowLevelKeyboard Hook
Stars: ✭ 32 (-87.74%)
Mutual labels: input
python-valid8
Yet another validation lib ;). Provides tools for general-purpose variable validation, function inputs/outputs validation as well as class fields validation. All entry points raise consistent ValidationError including all contextual details, with dynamic inheritance of ValueError/TypeError as appropriate.
Stars: ✭ 24 (-90.8%)
Mutual labels: input
vaadin-text-field
The themable Web Component providing input controls. Part of the Vaadin components.
Stars: ✭ 29 (-88.89%)
Mutual labels: input
React Telephone Input
React component for entering and validating international telephone numbers
Stars: ✭ 254 (-2.68%)
Mutual labels: input
UnityRawInput
Windows Raw Input wrapper for Unity game engine
Stars: ✭ 129 (-50.57%)
Mutual labels: input
jquery-rsSliderLens
UI slider control that magnifies the current value
Stars: ✭ 20 (-92.34%)
Mutual labels: input
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)
Features
- No dependencies
- Easy setup
- Accessible
Time to learn ES6?
Short and Sweet is written in ES6.
If you want to learn how to write modern ES6 JavaScript as well, I highly recommend ES6 for Everyone by Wes Bos.
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
Note that the project description data, including the texts, logos, images, and/or trademarks,
for each open source project belongs to its rightful owner.
If you wish to add or remove any projects, please contact us at [email protected].