在 JavaScript 中显示-隐藏密码切换（免费代码）_PHP项目

在本文中，您将了解如何创建显示密码眼睛图标 javascript。这种切换密码可见性的眼睛可以在各种登录或注册表中找到。用户可以在输入密码后隐藏和显示它们的位置。

显示/隐藏密码眼睛图标您可以使用 JavaScript 轻松创建的简单设计。如果你对 javascript 有基本的了解，那么你可以很容易地创建这个项目。

JavaScript 显示-隐藏密码切换

在 Web 应用程序中显示和隐藏密码是许多要求用户创建帐户或登录的网站的常见要求。这（如何在 JavaScript 中切换密码可见性）可以通过使用 JavaScript 和 HTML 来完成。

使用 javascript 显示和隐藏密码的最简单方法是使用两个按钮。第一个按钮将显示密码，第二个按钮将隐藏它。要实现此功能，您可以向每个按钮添加一个事件侦听器，这将更改保存密码的输入字段的类型。

以下是如何使用 JavaScript 显示和隐藏密码的示例：

希望您从上面的预览中了解了这个JavaScript 切换显示和隐藏密码的工作原理。正如您在上面看到的，我在网页中创建了一个小输入框。我使用 css 稍微设计了那个输入框。

在那个输入框中有一个图标来显示隐藏密码。单击此图标将显示和隐藏您输入的密码。

如何在 Javascript 中切换显示和隐藏密码

现在，如果您想制作它，请按照下面的教程进行操作。首先创建使用 html 的输入密码显示隐藏的基本结构。然后添加了输入框和眼睛图标。

然后用css设计了这个js显示密码，最后用javascript实现了。如果您只需要源代码，请使用文章下方的下载按钮。

1.输入密码的HTML代码显示隐藏

首先，我使用以下 html 代码创建了所有基本结构。这里使用的 JavaScript 很少。为了创建这个项目，我首先创建了一个盒子或区域。

然后我使用html的输入功能创建了输入框。然后在这里添加了一个眼睛图标。您可以添加任何其他图标而不是此图标。不仅如此，您还可以使用文本代替图标。

<div class="wrapper">
 <input type="Password" placeholder="Password" id="password">
 <span>
   <i class="fa fa-eye" aria-hidden="true" id="eye" onclick=toggle()"></i>
 </span>
</div>

2. 显示隐藏密码的CSS代码

现在我已经使用一些 CSS 设计了一些基本的网页。这里我在网页上使用了蓝色背景色。此外，位置：绝对，转换：翻译（-50%，-50%）用于将显示和隐藏密码字段放置在页面中间。

body{
 background-color: #5887ef;
 padding: 0;
 margin: 0;
}
.wrapper{
 position: absolute;
 transform: translate(-50%,-50%);
 top: 50%;
 left: 50%;
 width: 300px;
}

现在我们需要从输入框开始设计。输入框宽度：使用 300px。

input{
 box-sizing: border-box;
 width: 100%;
 font-size: 18px;
 border: none;
 padding: 10px 10px;
 border-radius: 3px;
 font-family: 'Poppins',sans-serif;
 color: #4a4a4a;
 letter-spacing: 0.5px;
 box-shadow: 0 5px 30px rgba(22,89,233,0.4);
}
::placeholder{
 color: #9a9a9a;
 font-weight: 400;
}

现在设计了用于切换密码可见性的眼睛图标。如果您使用的是文本而不是图标，则需要相应地更改此处的 CSS。

span{
 position: absolute;
 right: 15px;
 transform: translate(0,-50%);
 top: 50%;
 cursor: pointer;
}
.fa{
 font-size: 20px;
 color: #7a797e;
}

3. 用于切换显示隐藏密码的 JavaScript

现在是时候用 JavaScript 激活显示-隐藏密码切换了。这里使用的 javascript 很少，因此您不会有任何理解困难。

下面我给出了所有代码和解释这个 javascript 将如何使这个项目（如何在 Javascript 中切换显示和隐藏密码）工作。

var state= false;
function toggle(){
 if(state){
  document.getElementById("password").setAttribute("type","password");
  document.getElementById("eye").style.color='#7a797e';
  state = false;
 }
 else{
  document.getElementById("password").setAttribute("type","text");
  document.getElementById("eye").style.color='#5887ef';
  state = true;
 }
}

这是一个 JavaScript 函数，用于切换密码输入字段的可见性。调用该函数时，它会检查state变量的当前状态。如果state是true，它将密码输入字段的类型属性设置为“password”，并将 ID 为“eye”的元素的颜色更改为'#7a797e'.

如果state是false，它将密码输入字段的类型属性设置为“text”，并将“eye”元素的颜色更改为'#5887ef'. 进行更改后，state变量将更新为其相反的值。

希望通过本教程你知道我是如何创建这个的Javascript 显示-隐藏密码切换. 如果在创建此 html 切换密码可见性时有任何问题，那么您可以评论我。

在 JavaScript 中显示-隐藏密码切换（免费代码）

创始人

JavaScript 显示-隐藏密码切换

如何在 Javascript 中切换显示和隐藏密码

1.输入密码的HTML代码显示隐藏

2. 显示隐藏密码的CSS代码

3. 用于切换显示隐藏密码的 JavaScript

如何在服务器上创建网站？