Input-soft-limit NPM

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'