Contador de caracteres con retroalimentación visual-CharCount

Vista prévia

Descripción

CharCount es una biblioteca de JavaScript de ES6 que proporciona contadores de caracteres con comentarios visuales para los elementos Input y TextArea.

Funcionamiento

Instale CharCount a través de NPM.

# NPM
$ npm install char-count-es6 --save

Importe el CharCount.

import CharCount from 'char-count-es6';

O instale directamente la biblioteca CharCount en el documento.

<script src="/dist/charcount.min.js"></script>

Cree una nueva instancia de CharCount y pase las siguientes opciones al contador de caracteres.

const myCharCount = new CharCount({







 // selector of text field



selector: "cc-field",




// threshold values



warningThreshold: 25,



dangerThreshold: 10,



expendedThreshold: 100,




// counter class



counterClass: 'cc-count',




// DOM interaction classes



emptyClass: 'cc-is-empty',



fineClass: 'cc-is-fine',



warningClass: 'cc-is-warning',



dangerClass: 'cc-is-danger',



expendedClass: 'cc-is-expended',

});

Funciones de devolución de llamada disponibles.

const myCharCount = new CharCount({







 // Fired when a fields text count is zero; not entirely sure on its continued usefulness



onFieldEmpty: (field, remaining) => {},







// Fired when a fields text remaining count is a-okay, after coming from another state



onFieldFine: (field, remaining) => {},







// Fired when the desired warning threshold is reached



onFieldWarning: (field, remaining) => {},







// Fired when the desired danger threshold is reached



onFieldDanger: (field, remaining) => {},







// Fired when the limit is all used up!



onFieldExpended: (field, remaining) => {},

});