https://github.com/gueff/jquery-maxlengthvisualfeedback
gives visual feedback on the remaining free characters according to maxlength attribute. [HTML, formular, jQuery, JavaScript]
https://github.com/gueff/jquery-maxlengthvisualfeedback
javascript jquery
Last synced: 9 months ago
JSON representation
gives visual feedback on the remaining free characters according to maxlength attribute. [HTML, formular, jQuery, JavaScript]
- Host: GitHub
- URL: https://github.com/gueff/jquery-maxlengthvisualfeedback
- Owner: gueff
- Created: 2017-12-06T13:54:21.000Z (about 8 years ago)
- Default Branch: master
- Last Pushed: 2018-02-17T15:23:02.000Z (almost 8 years ago)
- Last Synced: 2025-02-06T07:46:22.835Z (11 months ago)
- Topics: javascript, jquery
- Language: HTML
- Homepage: https://blog.ueffing.net/post/2018/02/17/jquery-maxlength-visual-feedback/
- Size: 16.6 KB
- Stars: 2
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# jquery-maxlengthVisualFeedback
dynamically visualize a current input char consumption considering the related maxlength attribute value of HTML5 `` input elements such as `` and `` with a Progress-Bar using jQuery.
My Solution shows a progressbar beneath an input element illustrating in realtime how much of the assigned size defined by the element's maxlength (or data-maxlength) attribute has already been used. Per default it appears if current input is about >=50% of the assigned maxlength (you can change this).
It shows three different coloured sections:
- sectionA 50-69% (lightblue)
- sectionB 70-99% (orange)
- sectionC 100% (lightcoral)
The section colors you style by CSS. The section sizes you define by JS (see Modifying).
---
For Documentation and Examples, please see my Article: [jQuery maxlength visual Feedback](https://blog.ueffing.net/post/2018/02/17/jquery-maxlength-visual-feedback/) on https://blog.ueffing.net