JavaScript Password Show Hide – CodingNepal https://www.codingnepalweb.com CodingNepal is a blog dedicated to providing valuable and informative content about web development technologies such as HTML, CSS, JavaScript, and PHP. Sat, 13 May 2023 12:21:33 +0000 en-US hourly 1 https://wordpress.org/?v=6.4.2 Show & Hide Password in HTML CSS & JavaScript https://www.codingnepalweb.com/show-hide-password-html-css-javascript/ https://www.codingnepalweb.com/show-hide-password-html-css-javascript/#respond Sun, 06 Mar 2022 21:11:19 +0000 https://www.codingnepalweb.com/?p=4186 Show & Hide Password in HTML CSS & JavaScript

Hello friend, I hope you are doing well. Today you are going to learn how to show and hide passwords in the input field by clicking on the toggle using HTML CSS and JavaScript. There are lots of Login Forms I have created with different animations and features. But many of you have requested me to create input filed label up animation and toggling password visibility, so here we go.

As a definition, password show and hide mean showing or hiding the letter of the passwords by clicking on the toggle button. This type of feature is mostly added to the form for security purposes because many users do not want to show their passwords to those who are around them.

Let’s have a look at the given image of our project [how to show and hide password], as you can see on the given image. On the first input field you can see we can’t see the letter and eye icon is in hiding condition and on the second password field we can see the letter of password clearly and the eye icon is in show condition.

You can watch the real demo of this project [toggle to show and hide password], and all the HTML CSS, and JavaScript code that I have used to create this project. By watching the full video tutorial you will know how all codes are working behind this project.

Show & Hide Password in HTML CSS & JavaScript

I have provided all the HTML CSS and JavaScript code that I have used to create this project [Show and hide password], before jumping into the source code file you need to know some important points out of this video tutorial.

As you have seen in the video tutorial, At first we can see a password field with a grey border and eye icon, when I focused on the password field password text moved upward, border and eye icon color changed into the blue with the beautiful animation. To make this animation I have used only HTML CSS. After that, I typed some letters which are not visible and when I clicked on the eye icon password was visible and also eye icon changed at the same time, to make these changes I have used some JavaScript code.

I hope, now you can make this project [Show and Hide Password] easily. If you are feeling difficulty building this project, I have provided all the source code below.

You Might Like This:

Show and Hide Password [Source Code]

To take the source code of this Login and Registration Form Template first, you need to create two files: an HTML file and a CSS file. After creating these two files then you can copy-paste the following source code. You can also directly download all source codes of this Login and Registration Form by clicking on the given download button.

 

<!DOCTYPE html>
<!-- Coding By CodingNepal - codingnepalweb.com -->
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!----==== CSS ====-->
    <link rel="stylesheet" href="style.css">
    
    <!----==== Icounscout Link ====-->
    <link rel="stylesheet" href="https://unicons.iconscout.com/release/v4.0.0/css/line.css">
    
     <title>Password Show & Hide</title>
</head>
<body>
    <div class="container">
        <div class="input-box">
            <input type="password" spellcheck="false" required>
            <label for="">Password</label>
            <i class="uil uil-eye-slash toggle"></i>
        </div>
    </div>

    <script>

        const toggle = document.querySelector(".toggle"),
              input = document.querySelector("input");

              toggle.addEventListener("click", () =>{
                  if(input.type ==="password"){
                    input.type = "text";
                    toggle.classList.replace("uil-eye-slash", "uil-eye");
                  }else{
                    input.type = "password";
                  }
              })

    </script>

</body>
</html>

/* Google Font Import - Poppins */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap');
*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Poppins', sans-serif;
}

body{
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #4070f4;
}

.container{
    position: relative;
    max-width: 340px;
    width: 100%;
    padding: 20px;
    border-radius: 6px;
    background-color: #fff;
}

.container .input-box{
    position: relative;
    height: 50px;
}

.input-box input{
    position: absolute;
    height: 100%;
    width: 100%;
    outline: none;
    border: 2px solid #ccc;
    border-radius: 6px;
    padding: 0 35px 0 15px;
    transition: all 0.2s linear;
}

input:is(:focus, :valid){
    border-color: #4070f4;
}

.input-box :is(label, i){
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    color: #999;
    transition: all 0.2s linear;
}

.input-box label{
    left: 15px;
    pointer-events: none;
    font-size: 16px;
    font-weight: 400;
}

input:is(:focus, :valid) ~ label{
    color: #4070f4;
    top: 0;
    font-size: 12px;
    font-weight: 500;
    background-color: #fff;
}

.input-box i{
    right: 15px;
    cursor: pointer;
    font-size: 20px;
}

input:is(:focus, :valid) ~ i{
    color: #4070f4;
}

If you face any difficulties while creating your this Password Show and Hide Project or your code is not working as expected, you can download the source code files for this Show or Hide Password Project for free by clicking on the download button, and you can also view a live demo of this card slider by clicking on the view live button.

]]> https://www.codingnepalweb.com/show-hide-password-html-css-javascript/feed/ 0 Password Show Hide Button in HTML CSS & JavaScript https://www.codingnepalweb.com/password-show-hide-button-in-javascript/ https://www.codingnepalweb.com/password-show-hide-button-in-javascript/#comments Sun, 17 May 2020 07:12:00 +0000 https://codingnepalweb.com/2020/05/17/password-show-hide-button-in-html-css-javascript/ Password Show Hide Button in HTML CSS & JavaScript

Hello readers, Today in this blog you’ll learn how to create a Password Show Hide Button using HTML CSS & JavaScript. Earlier I have shared a Neumorphism Login Form using HTML & CSS. But there aren’t a password show hide button/features. Now it’s time to create a Password Show Hide Button.

As you know, when we log in or signup on any social platform like Facebook, Instagram then we have to put an email or username and password. Almost all social networks hide passwords by default in a bullet format, and there is a button, text, or checkbox to show our typed characters in the text format.

In the image, you can see there is a password field with the password show hide eye button. This Password Show or Hide Feature-based in Javascript.

When you entered some password in that field. At first, those entered characters are in bullet format by default. And, when you click on that eye icon the characters will convert into text format.

If you’re feeling difficult to understand what I am saying. You can watch a full video tutorial on this program (Password Show Hide Button).

Video Tutorial of Password Show or Hide Toggle Button

 
If you’re a beginner and you haven’t knowledge of JavaScript or jQuery. Then you can use this password show hide button in your login form if you have created it already. I believe this program I’ve created will help you a lot to understand the code behind creating this password show hide feature.

If you like this program (Password Show Hide Button) and want to get source codes. You can easily get the source codes of this program. To get the source codes you just need to scroll down.

Password Show or Hide Button [Source Codes]

To create this program (Password Show Hide Button). First, you need to create two Files one HTML File and another one is CSS File. After creating these files just paste the following codes in your file. First, create an HTML file with the name of index.html and paste the given codes in your HTML file. Remember, you’ve to create a file with .html extension.

<!DOCTYPE html>
<!-- Created By CodingNepal -->
<html lang="en" dir="ltr">
   <head>
      <meta charset="utf-8">
      <title>Password Show-Hide Button</title>
      <link rel="stylesheet" href="style.css">
      <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css"/>
   </head>
   <body>
      <div class="content">
         <div class="lock">
            <div class="fa fa-lock"></div>
         </div>
         <input type="password" placeholder="Enter Password" required>
         <span class="show-hide">
         <i class="fa fa-eye"></i>
         </span>
      </div>
      <script>
         const pass_field = document.querySelector("input");
         const show_btn = document.querySelector("i");
         show_btn.addEventListener("click", function(){
           if(pass_field.type === "password"){
             pass_field.type = "text";
             show_btn.classList.add("hide");
           }else{
             pass_field.type = "password";
             show_btn.classList.remove("hide");
           }
         });
      </script>
   </body>
</html>

Second, create a CSS file with the name of style.css and paste the given codes in your CSS file. Remember, you’ve to create a file with .css extension.

@import url('https://fonts.googleapis.com/css?family=Poppins:400,500,600&display=swap');
*{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
body{
  display: flex;
  height: 100vh;
  align-items: center;
  justify-content: center;
  text-align: center;
}
.content{
  height: 50px;
  width: 280px;
  display: flex;
  position: relative;
}
.content .lock{
  position: absolute;
  height: 50px;
  width: 50px;
  background: #48DBFB;
  color: white;
  line-height: 48px;
  font-size: 20px;
  border-radius: 3px 0 0 3px;
  border: 1px solid #48DBFB;
}
.content input{
  height: 100%;
  width: 100%;
  border-radius: 3px;
  border: 1px solid #48DBFB;
  padding-left: 60px;
  font-size: 16px;
  outline: none;
  color: #37d7fb;
  font-family: 'Poppins',sans-serif;
}
input:focus{
  box-shadow: 0 0 15px #82e6fc,
              0 0 25px #b4f0fd,
              0 0 35px #ffffff;
}
input::placeholder{
  color: #a6a6a6;
}
.show-hide{
  position: absolute;
  right: 15px;
  top: 50%;
  transform: translateY(-50%);
}
.show-hide i{
  font-size: 19px;
  color: #48DBFB;
  cursor: pointer;
  display: none;
}
.show-hide i.hide:before{
  content: '\f070';
}
input:valid ~ .show-hide i{
  display: block;
}

That’s all, now you’ve successfully created a Password Show Hide Button in HTML CSS & JavaScript. If your code does not work or you’ve faced any error/problem then please comment down or contact us from the contact page.

]]> https://www.codingnepalweb.com/password-show-hide-button-in-javascript/feed/ 3