Exibir senha

Exibe e esconde a senha nos campos password

Para altera um campo type password para um text você precisa passar no elemento que vai fazer esse bind, o data-target que é o mesmo id do campo que deseja mudar e a classe ls-toggle-pass, e se quiser fazer um toggle de classes, no mesmo bind, você precisa colocar o data-toggle-class e passar somente 2 classes separadas por vírgula, assim ls-ico-eye, ls-ico-eye-blocked.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<form action="" class="ls-form row">
  <fieldset>
    <label class="ls-label col-md-4">
      <b class="ls-label-text">Senha (com ícone)</b>
      <div class="ls-prefix-group">
        <input type="password" maxlength="20" id="password_field" name="password" value="locastyle é da hora né?" >
          <a class="ls-label-text-prefix ls-toggle-pass ls-ico-eye" data-toggle-class="ls-ico-eye, ls-ico-eye-blocked" data-target="#password_field" href="#">
          </a>
      </div>
    </label>
  </fieldset>
</form>
<form action="" class="ls-form ls-form-inline">
  <fieldset>
    <label class="ls-label">
      <b class="ls-label-text ls-hidden-accessible">Senha (com texto)</b>
      <input type="password" maxlength="20" id="password_field3" name="password" value="locastyle é da hora né?" >
      <a class="ls-toggle-pass ls-color-theme" data-target="#password_field3" href="#">Alterar</a>
    </label>
  </fieldset>
</form>

Pra mudar o layout basta adicionar no form a classe .ls-form-inline

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<form action="" class="ls-form ls-form-inline row">
  <fieldset>
    <label class="ls-label col-md-6">
      <b class="ls-label-text">Senha (com ícone)</b>
      <div class="ls-prefix-group">
        <input type="password" maxlength="20" id="password_field2a" name="password" value="locastyle é da hora né?" >
          <a class="ls-label-text-prefix ls-toggle-pass ls-ico-eye" data-toggle-class="ls-ico-eye, ls-ico-eye-blocked" data-target="#password_field2a" href="#">
          </a>
      </div>
    </label>
  </fieldset>
</form>
<form action="" class="ls-form ls-form-inline">
  <fieldset>
    <label class="ls-label">
      <b class="ls-label-text ls-hidden-accessible">Senha (com texto)</b>
      <input type="password" maxlength="20" id="password_field3a" name="password" value="locastyle é da hora né?" >
      <a class="ls-toggle-pass ls-color-theme" data-target="#password_field3a" href="#">Alterar</a>
    </label>
  </fieldset>
</form>

Locaweb Style

Documentação

Exibir senha