Инвертор для поля ввода пароля

Question

В формах Входа|Регистрации в поле ввода пароля справа в этом поле занимает место иконка с глазом

Только в отличие от Google иконка с глазом вплотную прилегает к полю ввода пароля. Подскажите как реализовать эту иконку с глазом (инвертор).

Answer 1

<div class="container">
<div class="row">
  <div class="col-md-8 col-md-offset-2">

    <div class="panel panel-default">
      <div class="panel-body">
        <form class="form-horizontal" method="" action="">

          <div class="form-group">
            <label class="col-md-4 control-label">Email</label>
            <div class="col-md-6">
              <input type="email" class="form-control" name="email" value="">
            </div>
          </div>
          <div class="form-group">
            <label class="col-md-4 control-label">Password</label>
            <div class="col-md-6">
              <input id="password-field" type="password" class="form-control" name="password" value="secret">
              <span toggle="#password-field" class="fa fa-fw fa-eye field-icon toggle-password"></span>
            </div>
          </div>
        </form>
      </div>
    </div>
  </div>
</div>
</div>

Отсюда https://codepen.io/Sohail05/pen/yOpeBm

Answer 2

Пароль твой будет храниться в теге input. У input есть много атрибутов type. К примеру, type="password" изменяет все символы на точки, а есть просто type="text", где ничего не происходил. При нажатии на инвертор, нужно просто поменять type="password" на type="text". Вот основное решение проблемы, надеюсь что ответил на твой вопрос. Чтобы реализовать смену иконки либо поменяй атрибут src (если у тебя тег image), либо класс для глаза, где будет храниться обновлённый вид

БЛОГ НА HUSL

Инвертор для поля ввода пароля

Ответы (2 шт):