Create Javascript show and hide Password Toggle Button by OCEC
Welcome to our latest blog post! Today, we're diving into the world of web development to explore a fundamental yet powerful feature: the password toggle button.
This HTML code creates a simple webpage with a password input field and a toggle button to show/hide the password. Here's a breakdown of what each part does:
1. `<!DOCTYPE html>`: This declaration specifies the document type and version of HTML being used.
2. `<html lang="en">`: This tag defines the root element of the HTML document and specifies the language of the content (English in this case).
3. `<head>`: This section contains meta-information about the HTML document, such as the character encoding, viewport settings, and the document title.
4. `<meta charset="UTF-8">`: This meta tag specifies the character encoding of the document to be UTF-8, which supports a wide range of characters from different languages.
5. `<meta name="viewport" content="width=device-width, initial-scale=1.0">`: This meta tag sets the viewport width to the width of the device and sets the initial zoom level to 1.0, ensuring proper scaling on different devices.
6. `<title>Document</title>`: This tag sets the title of the HTML document, which typically appears in the browser's title bar or tab.
7. `<style>`: This section contains CSS code to style the elements of the HTML document.
8. `.togglePassword`: This is a CSS class selector that styles the elements with the class `togglePassword`.
9. `.container`: This is a CSS class selector that styles the container element.
10. `<body>`: This section contains the main content of the HTML document.
11. `<div class="container">`: This `div` element serves as a container for the password input field and the toggle button.
12. `<input type="password" id="password">`: This `input` element creates a password input field with the ID `password`.
13. `<span class="togglePassword" id="toggle_password">đ</span>`: This `span` element contains the toggle button with the class `togglePassword` and the ID `toggle_password`. It displays a Unicode character (an eye symbol) representing the toggle button.
14. `<script>`: This section contains JavaScript code to add interactivity to the HTML document.
15. `var passwordField = document.getElementById("password");`: This JavaScript code retrieves the password input field element by its ID (`password`) and assigns it to the variable `passwordField`.
16. `var toggle_password = document.getElementById("toggle_password");`: This JavaScript code retrieves the toggle button element by its ID (`toggle_password`) and assigns it to the variable `toggle_password`.
17. `toggle_password.addEventListener("click", function() { ... });`: This JavaScript code adds a click event listener to the toggle button. When the button is clicked, the function inside the event listener is executed.
18. `const type = passwordField.getAttribute("type") === "password" ? "text" : "password";`: This line of code checks the current type of the password input field. If it's currently set to "password", it changes it to "text"; otherwise, it changes it back to "password".
19. `passwordField.setAttribute("type", type);`: This line of code sets the type attribute of the password input field to the value stored in the `type` variable, effectively toggling between hiding and showing the password.
Code :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.togglePassword{
cursor: pointer;
color:red;
font-size:20px;
}
</style>
</head>
<body>
<div class="container">
<input type="password" id="password" >
<span class="togglePassword" id="toggle_password">đ</span>
</div>
<script>
var passwordField = document.getElementById("password"); // Select password input field
var toggle_password = document.getElementById("toggle_password"); // Select toggle button
// Add event listener to the toggle button
toggle_password.addEventListener("click",function()
{
const type = passwordField.getAttribute("type") === "password" ? "text" : "password"; // Check current type
passwordField.setAttribute("type", type); // Toggle password visibility
});
</script>
</body>
</html>
Youtube video :
Share this article
Sandipan Kr Bag
I'm a dedicated full-stack developer, entrepreneur, and the proud owner of ocec.org.in , hailing from the vibrant country of India. My passion lies in creating informative tutorials and sharing valuable tips that empower fellow artisans in their journey. With a deep-rooted love for technology, I've been an ardent enthusiast of PHP, Laravel, Angular, Vue, Node, JavaScript, jQuery, Codeigniter, and Bootstrap from their earliest days. My philosophy revolves around the values of hard work and unwavering consistency, driving me to continuously explore, create, and share my knowledge with the tech community.
*Hire Me
Related Posts
āĻāĻžāĻāĻžāĻ¸ā§āĻā§āĻ°āĻŋāĻĒā§āĻ āĻāĻŋ? āĻāĻāĻŋ āĻā§āĻ¨ āĻŦā§āĻ¯āĻŦāĻšāĻžāĻ° āĻāĻ°āĻž āĻšā§ ?
āĻāĻžāĻāĻžāĻ¸ā§āĻā§āĻ°āĻŋāĻĒā§āĻ āĻ˛ā§āĻāĻžāĻ° āĻĒāĻĻā§āĻ§āĻ¤āĻŋ
Step-by-Step Guide a Dynamic Image Slider with HTML, CSS, and JavaScript
0 Comments
Load more Comments
Post a Comment
About me
i am sandipan kumar bag
Latest Posts
Arithmetic operators in java
2 weeks ago
List of all the operators in Java
2 weeks ago
20 Employee Data for Practice in a Relational Database Management System (RDBMS)
3 weeks ago
helllo