Contador e limite de caracteres

Conta e limita os caracteres.

Para mostrar um indicador de caractéres em um input, basta adicionar as seguintes propriedades no input: data-ls-module="charCounter" e maxlength com o valor de limite.

A propriedade data-ls-module="charCounter" inicia a função, que adiciona um texto logo abaixo do input com a indicação de limite dos caractéres. O atributo maxlength é do próprio HTML e é ele que limita a quantidade de caracteres no input.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
  <form action="" class="ls-form ls-form-horizontal row">
  <fieldset>
    <label class="ls-label col-md-4">
      <b class="ls-label-text">Nome</b>
      <div class="ls-prefix-group">
        <input type="text" data-ls-module="charCounter" maxlength="20" name="nome" placeholder="Digite seu nome completo" required>
        <span class="ls-label-text-prefix ls-ico-user"></span>
      </div>
    </label>
    <label class="ls-label col-md-8">
      <b class="ls-label-text">Mensagem</b>
      <textarea data-ls-module="charCounter" maxlength="100"></textarea>
    </label>
  </fieldset>
</form>

Locaweb Style

Documentação

Contador e limite de caracteres