Textarea counter

Présentation

Ce script permet d’ajouter le décompte de caractères restant sur un élément de formulaire de type textarea lorsque que l’attribut maxlength est défini.

Les utilisateurs de lecteurs d’écran sont prévenus du nombre de caractères restant lorsque certains seuils sont atteint grâce aux attributs aria-live="polite" ou aria-live="assertive" et aria-atomic="true".

Ces seuils sont configurables dans le script à travers les variables stepPolite et stepAssertive.

Ils sont fixés pour :

  • aria-live="polite" lorsqu’il reste 100 caractères ou moins
  • aria-live="assertive" lorsqu’il reste 20 caractères ou moins

Utilisation

Inclure le script et le style à votre projet.

Renseigner l’attribut maxlength sur l’élément textarea.

Exemple

Code écrit

<div class="form-group">
  <label for="envoi-mail-1">Test maxlength à 240</label>
  <textarea class="form-control" id="envoi-mail-1" cols="30" rows="4" maxlength="240"></textarea>
</div>

Code généré

<div class="form-group">
  <label for="envoi-mail-1">Test maxlength à 240</label>
  <textarea class="form-control" id="envoi-mail-1" cols="30" rows="4" maxlength="240"></textarea>
  <p class="textarea-counter"><span class="textarea-counter-nb">500</span> caractères restants</p>
</div>

Démo

Les informations données dans cette rubrique correspondent à la version 1.0 release candidate de Scampi, encore en développement. Pour lire la documentation de la version courante (0.2.1), référez-vous au readme du dépôt.