首页html中怎么显示隐藏密码

html中怎么显示隐藏密码

时间: 2024-01-08 07:18:01 浏览: 292

在HTML中，可以使用input标签来创建密码输入框，密码输入框的内容会被隐藏，但用户输入的字符仍然存在。如果你想在密码输入框旁边提供一个按钮，用户点击后可以显示或隐藏密码，可以通过JavaScript来实现。以下是一个简单的示例，演示如何在HTML中显示和隐藏密码： ```html <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Show/Hide Password Example</title> <script> function showPassword() { var x = document.getElementById("password"); if (x.type === "password") { x.type = "text"; } else { x.type = "password"; } } </script> </head> <body> <label for="password">Password:</label> <input type="password" id="password" name="password"> <button onclick="showPassword()">Show/Hide Password</button> </body> </html> ``` 在这个示例中，我们创建了一个密码输入框和一个按钮。当用户点击按钮时，JavaScript函数`showPassword()`会被调用。该函数首先获取密码输入框的引用，然后检查输入框的类型。如果输入框的类型是“password”，则将其类型更改为“text”，以便显示用户输入的字符。否则，将输入框的类型更改回“password”，以便隐藏密码。

阅读全文