Input Soft Limit
A simple JavaScript module that applies a soft character limit to inputs and textareas.
Input Soft Limit can be applied to a collection of inputs and/or textareas, each with their own character limit. If any of the inputs/textareas exceed their character limit, the form's submit button will be disabled.
How to use
Install it as a dependency with npm:
npm i -D input-soft-limit
Import it:
import InputSoftLimit from 'input-soft-limit';Instantiate it, passing in some settings:
const inputSoftLimitInstance = new InputSoftLimit({
submitButton: '.submit',
inputInvalidClass: 'is-invalid'
});Initialize it:
inputSoftLimitInstance.init();Add the necessary classes and data attributes to your HTML:
<input type="text"
class="input-soft-limit"
id="name"
data-input-soft-limit="10"
data-input-soft-limit-counter=".name-count">
<p>Characters remaining: <span class="name-count"></span></p>HTML attributes
| Property | Type | Description |
|---|---|---|
data-input-soft-limit |
String | Required - the input/textarea's character limit |
data-soft-limit-counter |
String | The selector string for the element where the input/textareas remaining character count should be shown. Make sure this is unique for each input/textarea. |
Settings
| Property | Type | Description | Default Value |
|---|---|---|---|
inputsSelector |
String | The selector string that the module should use to select inputs and/or textareas. | '.input-soft-limit' |
parent |
DOM Element | The element inside which the module will look for elements matching the inputsSelector. |
document |
submitButton |
String | The selector string that the module should use to select the submit button. Omit this property if you do not want to use this feature. | null |
inputValidClass |
String | The CSS class that will be applied to inputs and textareas that have exceeded their character limit. | 'is-invalid' |