Как создать поле ввода пароля со значком глаза: методы и примеры - Fcodenotes

Чтобы создать поле ввода «показать пароль» со значком глаза, вы можете использовать несколько методов. Вот некоторые из них:

CSS и JavaScript. Вы можете использовать CSS для стилизации поля ввода и добавления значка глаза, а затем использовать JavaScript для переключения видимости пароля при нажатии значка глаза. Вот простой пример:

HTML:

<input type="password" id="passwordInput">
<span id="togglePassword" onclick="togglePasswordVisibility()"></span>

CSS:

#togglePassword {
  position: relative;
  top: -25px;
  right: 10px;
  display: inline-block;
  width: 20px;
  height: 20px;
  background: url(eye-icon.png) no-repeat;
  cursor: pointer;
}
#passwordInput[type="password"] {
  padding-right: 30px;
}

JavaScript:

function togglePasswordVisibility() {
  var passwordInput = document.getElementById("passwordInput");
  if (passwordInput.type === "password") {
    passwordInput.type = "text";
  } else {
    passwordInput.type = "password";
  }
}

Bootstrap. Если вы используете платформу Bootstrap, вы можете использовать ее встроенные классы управления формой и класс input-group-append, чтобы добавить значок глаза. Вот пример:

<div class="input-group">
  <input type="password" class="form-control" id="passwordInput">
  <div class="input-group-append">
    <span class="input-group-text">
      <i class="fa fa-eye" id="togglePassword" onclick="togglePasswordVisibility()"></i>
    </span>
  </div>
</div>

Material-UI: если вы используете библиотеку Material-UI для React, вы можете воспользоваться ее компонентами для создания поля ввода «показать пароль». Вот пример:

import React, { useState } from 'react';
import { TextField, InputAdornment, IconButton } from '@material-ui/core';
import { Visibility, VisibilityOff } from '@material-ui/icons';
function PasswordInput() {
  const [showPassword, setShowPassword] = useState(false);
  const togglePasswordVisibility = () => {
    setShowPassword(!showPassword);
  };
  return (
    <TextField
      type={showPassword ? 'text' : 'password'}
      label="Password"
      InputProps={{
        endAdornment: (
          <InputAdornment position="end">
            <IconButton onClick={togglePasswordVisibility} edge="end">
              {showPassword ? <Visibility /> : <VisibilityOff />}
            </IconButton>
          </InputAdornment>
        ),
      }}
    />
  );
}