{"id":2150,"date":"2023-02-07T02:34:36","date_gmt":"2023-02-07T02:34:36","guid":{"rendered":"https:\/\/foolishdeveloper.com\/?p=2150"},"modified":"2023-02-07T02:34:38","modified_gmt":"2023-02-07T02:34:38","slug":"show-hide-password-toggle-javascript","status":"publish","type":"post","link":"https:\/\/foolishdeveloper.com\/show-hide-password-toggle-javascript\/","title":{"rendered":"Show-Hide Password Toggle in JavaScript (Free Code)"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-post\" data-elementor-id=\"2150\" class=\"elementor elementor-2150\" data-elementor-post-type=\"post\">\n\t\t\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-d3881e6 elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"d3881e6\" data-element_type=\"section\" data-e-type=\"section\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-9d0ad33\" data-id=\"9d0ad33\" data-element_type=\"column\" data-e-type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-efb70dc elementor-widget elementor-widget-text-editor\" data-id=\"efb70dc\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>Do you want to create <b>Show and hide password using JavaScript<\/b>?<\/p><p>In this article you will know how to create show password eye icon javascript. This type of toggle password visibility eye can be found in various login or registration forms. Where the user can hide and show them after inputting the password.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-f909c11 elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"f909c11\" data-element_type=\"section\" data-e-type=\"section\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-5da9f1f\" data-id=\"5da9f1f\" data-element_type=\"column\" data-e-type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-ba06045 elementor-widget elementor-widget-image\" data-id=\"ba06045\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"image.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<img fetchpriority=\"high\" decoding=\"async\" width=\"1000\" height=\"435\" src=\"https:\/\/foolishdeveloper.com\/wp-content\/uploads\/2023\/01\/Show-Hide-Password-Toggle-in-JavaScript.webp\" class=\"attachment-large size-large wp-image-2152\" alt=\"Show-Hide Password Toggle in JavaScript\" srcset=\"https:\/\/foolishdeveloper.com\/wp-content\/uploads\/2023\/01\/Show-Hide-Password-Toggle-in-JavaScript.webp 1000w, https:\/\/foolishdeveloper.com\/wp-content\/uploads\/2023\/01\/Show-Hide-Password-Toggle-in-JavaScript-300x131.webp 300w, https:\/\/foolishdeveloper.com\/wp-content\/uploads\/2023\/01\/Show-Hide-Password-Toggle-in-JavaScript-768x334.webp 768w\" sizes=\"(max-width: 1000px) 100vw, 1000px\" \/>\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-7b89ad4 elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"7b89ad4\" data-element_type=\"section\" data-e-type=\"section\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-040906c\" data-id=\"040906c\" data-element_type=\"column\" data-e-type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-4d15c6c elementor-widget elementor-widget-text-editor\" data-id=\"4d15c6c\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>show\/hide password eye icon A simple design that you can easily create with JavaScript. If you have basic idea about javascript then you can create this project very easily.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-bd4a915 elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"bd4a915\" data-element_type=\"section\" data-e-type=\"section\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-3b40244\" data-id=\"3b40244\" data-element_type=\"column\" data-e-type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-153695c elementor-widget elementor-widget-heading\" data-id=\"153695c\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h2 class=\"elementor-heading-title elementor-size-default\">JavaScript Show-Hide Password Toggle<\/h2>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-0e9a5ba elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"0e9a5ba\" data-element_type=\"section\" data-e-type=\"section\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-3d0b71f\" data-id=\"3d0b71f\" data-element_type=\"column\" data-e-type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-09ed399 elementor-widget elementor-widget-text-editor\" data-id=\"09ed399\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>Showing and hiding passwords in a web application is a common requirement for many websites that require users to create accounts or login. This(How to Toggle Password Visibility in JavaScript) can be accomplished by using JavaScript and HTML.<\/p><p>The simplest way to<b> show and hide passwords using javascript<\/b> is to use two buttons. The first button will show the password and the second button will hide it. To implement this functionality, you can add an event listener to each button that will change the type of the input field that holds the password.<\/p><p>Here&#8217;s an example of how you can show and hide a password using JavaScript:<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-e63eb6e elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"e63eb6e\" data-element_type=\"section\" data-e-type=\"section\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-39bb559\" data-id=\"39bb559\" data-element_type=\"column\" data-e-type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-4b7754d elementor-widget elementor-widget-html\" data-id=\"4b7754d\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<p class=\"codepen\" data-height=\"406\" data-theme-id=\"light\" data-default-tab=\"result\" data-slug-hash=\"poZZaXJ\" data-preview=\"true\" data-user=\"groundtutorial\" style=\"height: 406px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;\">\r\n  <span>See the Pen <a href=\"https:\/\/codepen.io\/groundtutorial\/pen\/poZZaXJ\" target=\"_blank\" rel=\"noopener\">\r\n  Untitled<\/a> by Ground Tutorial (<a href=\"https:\/\/codepen.io\/groundtutorial\" target=\"_blank\" rel=\"noopener\">@groundtutorial<\/a>)\r\n  on <a href=\"https:\/\/codepen.io\" target=\"_blank\" rel=\"noopener\">CodePen<\/a>.<\/span>\r\n<\/p>\r\n<script async src=\"https:\/\/cpwebassets.codepen.io\/assets\/embed\/ei.js\"><\/script>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-81396ac elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"81396ac\" data-element_type=\"section\" data-e-type=\"section\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-273d17d\" data-id=\"273d17d\" data-element_type=\"column\" data-e-type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-1bc8eb7 elementor-widget elementor-widget-text-editor\" data-id=\"1bc8eb7\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>Hopefully from the above preview you have learned how this <b>JavaScript Toggle Show and Hide Password<\/b> works. As you can see above I have created a small input box within a web page. I used css to design that input box a bit.<\/p><p>In that input box there is an icon to show hide password. Clicking on this icon will show and hide your inputted password.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-d1c8c0b elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"d1c8c0b\" data-element_type=\"section\" data-e-type=\"section\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-1039592\" data-id=\"1039592\" data-element_type=\"column\" data-e-type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-6e2279b elementor-widget elementor-widget-heading\" data-id=\"6e2279b\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h2 class=\"elementor-heading-title elementor-size-default\">How to Toggle Show and Hide Password in Javascript<\/h2>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-5fcad0b elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"5fcad0b\" data-element_type=\"section\" data-e-type=\"section\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-f5ce298\" data-id=\"f5ce298\" data-element_type=\"column\" data-e-type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-5739cbd elementor-widget elementor-widget-text-editor\" data-id=\"5739cbd\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>Now if you want to make it then follow the tutorial below. First the basic structure of <b>input password show hide<\/b> using html is created. Then added input box and eye icon.<\/p><p>Then designed this <b>js show password<\/b> using css and finally implemented it with javascript. If you only need the source code, use the download button below the article.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-1aa3309 elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"1aa3309\" data-element_type=\"section\" data-e-type=\"section\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-e14625f\" data-id=\"e14625f\" data-element_type=\"column\" data-e-type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-d7b990e elementor-widget elementor-widget-heading\" data-id=\"d7b990e\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h3 class=\"elementor-heading-title elementor-size-default\">1. HTML code for input password show hide<\/h3>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-d91dc56 elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"d91dc56\" data-element_type=\"section\" data-e-type=\"section\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-e52dce2\" data-id=\"e52dce2\" data-element_type=\"column\" data-e-type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-1736d4c elementor-widget elementor-widget-text-editor\" data-id=\"1736d4c\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>First I created all the basic structure using the following html codes. Very little JavaScript is used here. To create this project first I created a box or area.\u00a0<\/p><p>Then I created the input box using html&#8217;s input function. Then added an eye icon here. You can add any other icon instead of this icon. Not only that you can use text instead of icons.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-58e58fd elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"58e58fd\" data-element_type=\"section\" data-e-type=\"section\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-56d29a2\" data-id=\"56d29a2\" data-element_type=\"column\" data-e-type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-0ab4fc9 elementor-widget elementor-widget-code-highlight\" data-id=\"0ab4fc9\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"code-highlight.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"prismjs-tomorrow copy-to-clipboard \">\n\t\t\t<pre data-line=\"\" class=\"highlight-height language-html line-numbers\">\n\t\t\t\t<code readonly=\"true\" class=\"language-html\">\n\t\t\t\t\t<xmp><div class=\"wrapper\">\r\n\t<input type=\"Password\" placeholder=\"Password\" id=\"password\">\r\n\t<span>\r\n\t\t\t<i class=\"fa fa-eye\" aria-hidden=\"true\" id=\"eye\" onclick=\"toggle()\"><\/i>\r\n\t<\/span>\r\n<\/div><\/xmp>\n\t\t\t\t<\/code>\n\t\t\t<\/pre>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-b9096d3 elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"b9096d3\" data-element_type=\"section\" data-e-type=\"section\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-fc9bda7\" data-id=\"fc9bda7\" data-element_type=\"column\" data-e-type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-9b15e3a elementor-widget elementor-widget-heading\" data-id=\"9b15e3a\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h3 class=\"elementor-heading-title elementor-size-default\">2. CSS code for Show-Hide Password<\/h3>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-ce0d79c elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"ce0d79c\" data-element_type=\"section\" data-e-type=\"section\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-7b0dedd\" data-id=\"7b0dedd\" data-element_type=\"column\" data-e-type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-5bc5ac0 elementor-widget elementor-widget-text-editor\" data-id=\"5bc5ac0\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>Now I have designed some basic web page using some amount of CSS. Here I have used blue background color on the webpage. Besides, position: absolute, <i>transform: translate(-50%,-50%)<\/i> is used to place the <b>Show and Hide password field<\/b> in the middle of the page.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-eae5c6f elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"eae5c6f\" data-element_type=\"section\" data-e-type=\"section\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-543f3e3\" data-id=\"543f3e3\" data-element_type=\"column\" data-e-type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-e294c6b elementor-widget elementor-widget-code-highlight\" data-id=\"e294c6b\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"code-highlight.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"prismjs-tomorrow copy-to-clipboard \">\n\t\t\t<pre data-line=\"\" class=\"highlight-height language-css line-numbers\">\n\t\t\t\t<code readonly=\"true\" class=\"language-css\">\n\t\t\t\t\t<xmp>body{\r\n\tbackground-color: #5887ef;\r\n\tpadding: 0;\r\n\tmargin: 0;\r\n}\r\n.wrapper{\r\n\tposition: absolute;\r\n\ttransform: translate(-50%,-50%);\r\n\ttop: 50%;\r\n\tleft: 50%;\r\n\twidth: 300px;\r\n}<\/xmp>\n\t\t\t\t<\/code>\n\t\t\t<\/pre>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-f60f046 elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"f60f046\" data-element_type=\"section\" data-e-type=\"section\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-2ec366c\" data-id=\"2ec366c\" data-element_type=\"column\" data-e-type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-7795a70 elementor-widget elementor-widget-text-editor\" data-id=\"7795a70\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>Now we need to design from the input box. Input box width: 300px is used.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-e6e8f8e elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"e6e8f8e\" data-element_type=\"section\" data-e-type=\"section\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-4f118bb\" data-id=\"4f118bb\" data-element_type=\"column\" data-e-type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-cfaaf4c elementor-widget elementor-widget-code-highlight\" data-id=\"cfaaf4c\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"code-highlight.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"prismjs-tomorrow copy-to-clipboard \">\n\t\t\t<pre data-line=\"\" class=\"highlight-height language-css line-numbers\">\n\t\t\t\t<code readonly=\"true\" class=\"language-css\">\n\t\t\t\t\t<xmp>input{\r\n\tbox-sizing: border-box;\r\n\twidth: 100%;\r\n\tfont-size: 18px;\r\n\tborder: none;\r\n\tpadding: 10px 10px;\r\n\tborder-radius: 3px;\r\n\tfont-family: 'Poppins',sans-serif;\r\n\tcolor: #4a4a4a;\r\n\tletter-spacing: 0.5px;\r\n\tbox-shadow: 0 5px 30px rgba(22,89,233,0.4);\r\n}\r\n::placeholder{\r\n\tcolor: #9a9a9a;\r\n\tfont-weight: 400;\r\n}<\/xmp>\n\t\t\t\t<\/code>\n\t\t\t<\/pre>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-d01067c elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"d01067c\" data-element_type=\"section\" data-e-type=\"section\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-2fd7797\" data-id=\"2fd7797\" data-element_type=\"column\" data-e-type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-6e6286a elementor-widget elementor-widget-text-editor\" data-id=\"6e6286a\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>Now designed the eye icon used for <b>Toggle password visibility<\/b>. If you&#8217;re using text instead of icons, you&#8217;ll need to change the CSS here accordingly.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-7176a75 elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"7176a75\" data-element_type=\"section\" data-e-type=\"section\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-54093a6\" data-id=\"54093a6\" data-element_type=\"column\" data-e-type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-141b5e6 elementor-widget elementor-widget-code-highlight\" data-id=\"141b5e6\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"code-highlight.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"prismjs-tomorrow copy-to-clipboard \">\n\t\t\t<pre data-line=\"\" class=\"highlight-height language-css line-numbers\">\n\t\t\t\t<code readonly=\"true\" class=\"language-css\">\n\t\t\t\t\t<xmp>span{\r\n\tposition: absolute;\r\n\tright: 15px;\r\n\ttransform: translate(0,-50%);\r\n\ttop: 50%;\r\n\tcursor: pointer;\r\n}\r\n.fa{\r\n\tfont-size: 20px;\r\n\tcolor: #7a797e;\r\n}<\/xmp>\n\t\t\t\t<\/code>\n\t\t\t<\/pre>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-537f6d6 elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"537f6d6\" data-element_type=\"section\" data-e-type=\"section\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-e00bd76\" data-id=\"e00bd76\" data-element_type=\"column\" data-e-type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-984288e elementor-widget elementor-widget-heading\" data-id=\"984288e\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h3 class=\"elementor-heading-title elementor-size-default\">3. JavaScript for Toggle Show Hide Password<\/h3>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-d7e65a8 elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"d7e65a8\" data-element_type=\"section\" data-e-type=\"section\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-42652ab\" data-id=\"42652ab\" data-element_type=\"column\" data-e-type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-e4d1bc4 elementor-widget elementor-widget-text-editor\" data-id=\"e4d1bc4\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>Now it&#8217;s time to activate the <b>Show-Hide Password Toggle<\/b> with JavaScript. Very little javascript is used here so you won&#8217;t have any difficulty in understanding.<\/p><p>Below I have given all the code and explanation how this javascript will make this project (How to Toggle Show and Hide Password in Javascript) work.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-b79fd44 elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"b79fd44\" data-element_type=\"section\" data-e-type=\"section\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-84fda56\" data-id=\"84fda56\" data-element_type=\"column\" data-e-type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-61a65aa elementor-widget elementor-widget-code-highlight\" data-id=\"61a65aa\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"code-highlight.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"prismjs-tomorrow copy-to-clipboard \">\n\t\t\t<pre data-line=\"\" class=\"highlight-height language-javascript line-numbers\">\n\t\t\t\t<code readonly=\"true\" class=\"language-javascript\">\n\t\t\t\t\t<xmp>var state= false;\r\nfunction toggle(){\r\n\tif(state){\r\n\t\tdocument.getElementById(\"password\").setAttribute(\"type\",\"password\");\r\n\t\tdocument.getElementById(\"eye\").style.color='#7a797e';\r\n\t\tstate = false;\r\n\t}\r\n\telse{\r\n\t\tdocument.getElementById(\"password\").setAttribute(\"type\",\"text\");\r\n\t\tdocument.getElementById(\"eye\").style.color='#5887ef';\r\n\t\tstate = true;\r\n\t}\r\n}<\/xmp>\n\t\t\t\t<\/code>\n\t\t\t<\/pre>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-72fff59 elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"72fff59\" data-element_type=\"section\" data-e-type=\"section\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-47d4488\" data-id=\"47d4488\" data-element_type=\"column\" data-e-type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-9085160 elementor-widget elementor-widget-text-editor\" data-id=\"9085160\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>This is a JavaScript function that toggles the visibility of a password input field. When the function is called, it checks the current state of the <code>state<\/code> variable. If the <code>state<\/code> is <code>true<\/code>, it sets the type attribute of the password input field to &#8220;password&#8221; and changes the color of an element with the ID &#8220;eye&#8221; to <i>&#8216;#7a797e&#8217;<\/i>.\u00a0<\/p><p>If the <code>state<\/code> is <code>false<\/code>, it sets the type attribute of the password input field to &#8220;text&#8221; and changes the color of the &#8220;eye&#8221; element to <i>&#8216;#5887ef&#8217;<\/i>. After the changes are made, the <code>state<\/code> variable is updated to its opposite value.<\/p><p>\u00a0<\/p><p>Hope from this tutorial you know how I created this <i>Javascript Show-Hide Password Toggle<\/i>. If there is any problem while creating this html Toggle Password Visibility then you can comment me.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-9c27ff4 elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"9c27ff4\" data-element_type=\"section\" data-e-type=\"section\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-44647448\" data-id=\"44647448\" data-element_type=\"column\" data-e-type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-2dd49d01 elementor-align-center elementor-widget elementor-widget-button\" data-id=\"2dd49d01\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"button.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<div class=\"elementor-button-wrapper\">\n\t\t\t\t\t<a class=\"elementor-button elementor-button-link elementor-size-sm\" href=\"https:\/\/codepen.io\/cpe\/pen\/export\/poZZaXJ\" target=\"_blank\" rel=\"noopener\">\n\t\t\t\t\t\t<span class=\"elementor-button-content-wrapper\">\n\t\t\t\t\t\t\t\t\t<span class=\"elementor-button-text\">Source Code<\/span>\n\t\t\t\t\t<\/span>\n\t\t\t\t\t<\/a>\n\t\t\t\t<\/div>\n\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-25a9a15d elementor-section-content-middle elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"25a9a15d\" data-element_type=\"section\" data-e-type=\"section\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-no\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-4d13610e\" data-id=\"4d13610e\" data-element_type=\"column\" data-e-type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-4a9a6d4d elementor-widget elementor-widget-toggle\" data-id=\"4a9a6d4d\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"toggle.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"elementor-toggle\">\n\t\t\t\t\t\t\t<div class=\"elementor-toggle-item\">\n\t\t\t\t\t<div id=\"elementor-tab-title-1251\" class=\"elementor-tab-title\" data-tab=\"1\" role=\"button\" aria-controls=\"elementor-tab-content-1251\" aria-expanded=\"false\">\n\t\t\t\t\t\t\t\t\t\t\t\t<span class=\"elementor-toggle-icon elementor-toggle-icon-right\" aria-hidden=\"true\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<span class=\"elementor-toggle-icon-closed\"><i class=\"fas fa-caret-right\"><\/i><\/span>\n\t\t\t\t\t\t\t\t<span class=\"elementor-toggle-icon-opened\"><i class=\"elementor-toggle-icon-opened fas fa-caret-up\"><\/i><\/span>\n\t\t\t\t\t\t\t\t\t\t\t\t\t<\/span>\n\t\t\t\t\t\t\t\t\t\t\t\t<a class=\"elementor-toggle-title\" tabindex=\"0\"><h3>How to show and hide password in JavaScript?<\/h3><\/a>\n\t\t\t\t\t<\/div>\n\n\t\t\t\t\t<div id=\"elementor-tab-content-1251\" class=\"elementor-tab-content elementor-clearfix\" data-tab=\"1\" role=\"region\" aria-labelledby=\"elementor-tab-title-1251\"><p>Here is an example of how to show and hide a password in JavaScript:<\/p><pre>var state = false;<br \/><br \/>function toggle() {<br \/>if (state) {<br \/>document.getElementById(\"password\").setAttribute(\"type\", \"password\");<br \/>state = false;<br \/>} else {<br \/>document.getElementById(\"password\").setAttribute(\"type\", \"text\");<br \/>state = true;<br \/>}<br \/>}<\/pre><p>In this example, we use a <code>state<\/code> variable to keep track of whether the password is currently shown or hidden. The <code>toggle<\/code> function changes the type attribute of the password input field with an ID of &#8220;password&#8221; from &#8220;password&#8221; to &#8220;text&#8221; or vice versa, depending on the current state.<\/p><p>The <code>state<\/code> variable is updated after each toggle to keep track of the current state. To use this in a HTML page, you would need to add an input field with the <code>id<\/code> attribute set to &#8220;password&#8221; and a button or other element that calls the <code>toggle<\/code> function when it is clicked.<\/p><\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t\t\t<div class=\"elementor-toggle-item\">\n\t\t\t\t\t<div id=\"elementor-tab-title-1252\" class=\"elementor-tab-title\" data-tab=\"2\" role=\"button\" aria-controls=\"elementor-tab-content-1252\" aria-expanded=\"false\">\n\t\t\t\t\t\t\t\t\t\t\t\t<span class=\"elementor-toggle-icon elementor-toggle-icon-right\" aria-hidden=\"true\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<span class=\"elementor-toggle-icon-closed\"><i class=\"fas fa-caret-right\"><\/i><\/span>\n\t\t\t\t\t\t\t\t<span class=\"elementor-toggle-icon-opened\"><i class=\"elementor-toggle-icon-opened fas fa-caret-up\"><\/i><\/span>\n\t\t\t\t\t\t\t\t\t\t\t\t\t<\/span>\n\t\t\t\t\t\t\t\t\t\t\t\t<a class=\"elementor-toggle-title\" tabindex=\"0\"><h3>Javascript Show\/Hide toggle button for password field<\/h3><\/a>\n\t\t\t\t\t<\/div>\n\n\t\t\t\t\t<div id=\"elementor-tab-content-1252\" class=\"elementor-tab-content elementor-clearfix\" data-tab=\"2\" role=\"region\" aria-labelledby=\"elementor-tab-title-1252\"><p>Here&#8217;s a complete HTML, CSS, and JavaScript example of how to create a toggle button to show and hide a password input field:<\/p><pre>&lt;div&gt;<br \/>&lt;input type=\"password\" id=\"password\"&gt;<br \/>&lt;button id=\"toggleBtn\" onclick=\"toggle()\"&gt;Show &lt;\/button&gt;<br \/>&lt;\/div&gt;<\/pre><pre>var state = false;<br \/><br \/>function toggle() {<br \/>if (state) {<br \/>document.getElementById(\"password\").setAttribute(\"type\", \"password\");<br \/>document.getElementById(\"toggleBtn\").innerHTML = \"Show\";<br \/>state = false;<br \/>} else {<br \/>document.getElementById(\"password\").setAttribute(\"type\", \"text\");<br \/>document.getElementById(\"toggleBtn\").innerHTML = \"Hide\";<br \/>state = true;<br \/>}<br \/>}<\/pre><pre>div {<br \/>display: flex;<br \/>align-items: center;<br \/>}<br \/><br \/>input[type=\"password\"] {<br \/>margin-right: 10px;<br \/>}<br \/><br \/>button {<br \/>background-color: lightgray;<br \/>border: none;<br \/>padding: 5px 10px;<br \/>}<\/pre><p>This will create a password input field with a toggle button next to it. The JavaScript function <code>toggle<\/code> changes the type attribute of the password input field from &#8220;password&#8221; to &#8220;text&#8221; or vice versa, depending on the current state.<\/p><p>The text on the button is updated to reflect the current state (either &#8220;Show&#8221; or &#8220;Hide&#8221;). The CSS is optional and is used to style the appearance of the input field and button.<\/p><\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t\t\t<div class=\"elementor-toggle-item\">\n\t\t\t\t\t<div id=\"elementor-tab-title-1253\" class=\"elementor-tab-title\" data-tab=\"3\" role=\"button\" aria-controls=\"elementor-tab-content-1253\" aria-expanded=\"false\">\n\t\t\t\t\t\t\t\t\t\t\t\t<span class=\"elementor-toggle-icon elementor-toggle-icon-right\" aria-hidden=\"true\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<span class=\"elementor-toggle-icon-closed\"><i class=\"fas fa-caret-right\"><\/i><\/span>\n\t\t\t\t\t\t\t\t<span class=\"elementor-toggle-icon-opened\"><i class=\"elementor-toggle-icon-opened fas fa-caret-up\"><\/i><\/span>\n\t\t\t\t\t\t\t\t\t\t\t\t\t<\/span>\n\t\t\t\t\t\t\t\t\t\t\t\t<a class=\"elementor-toggle-title\" tabindex=\"0\"><h3>Show and Hide Password With Eye Icon using HTML<\/h3><\/a>\n\t\t\t\t\t<\/div>\n\n\t\t\t\t\t<div id=\"elementor-tab-content-1253\" class=\"elementor-tab-content elementor-clearfix\" data-tab=\"3\" role=\"region\" aria-labelledby=\"elementor-tab-title-1253\"><p>Here&#8217;s an example of how to show and hide a password input field using an eye icon in HTML:<\/p><pre>&lt;div class=\"password-container\"&gt;<br \/>&lt;input type=\"password\" id=\"password\"&gt;<br \/>&lt;span class=\"show-password\" onclick=\"toggle()\"&gt;<br \/>&lt;i class=\"fas fa-eye\" id=\"eye\"&gt;&lt;\/i&gt;<br \/>&lt;\/span&gt;<br \/>&lt;\/div&gt;<\/pre><pre>var state = false;<br \/><br \/>function toggle() {<br \/>if (state) {<br \/>document.getElementById(\"password\").setAttribute(\"type\", \"password\");<br \/>document.getElementById(\"eye\").classList.remove(\"fa-eye-slash\");<br \/>document.getElementById(\"eye\").classList.add(\"fa-eye\");<br \/>state = false;<br \/>} else {<br \/>document.getElementById(\"password\").setAttribute(\"type\", \"text\");<br \/>document.getElementById(\"eye\").classList.remove(\"fa-eye\");<br \/>document.getElementById(\"eye\").classList.add(\"fa-eye-slash\");<br \/>state = true;<br \/>}<br \/>}<\/pre><pre>.password-container {<br \/>position: relative;<br \/>}<br \/><br \/>input[type=\"password\"] {<br \/>padding-right: 40px;<br \/>}<br \/><br \/>.show-password {<br \/>position: absolute;<br \/>right: 10px;<br \/>top: 50%;<br \/>transform: translateY(-50%);<br \/>cursor: pointer;<br \/>}<br \/><br \/>.fa-eye, .fa-eye-slash {<br \/>font-size: 18px;<br \/>}<\/pre><p>This example uses Font Awesome icons to display an eye icon to toggle the visibility of the password. The JavaScript <code>toggle<\/code> function changes the type attribute of the password input field and updates the eye icon accordingly.<\/p><p>The CSS is optional and is used to position the eye icon and style the appearance of the input field. To use this example, you need to include Font Awesome icons in your project.<\/p><\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t\t\t\t\t\t<script type=\"application\/ld+json\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@type\":\"FAQPage\",\"mainEntity\":[{\"@type\":\"Question\",\"name\":\"How to show and hide password in JavaScript?\",\"acceptedAnswer\":{\"@type\":\"Answer\",\"text\":\"<p>Here is an example of how to show and hide a password in JavaScript:<\\\/p><pre>var state = false;<br \\\/><br \\\/>function toggle() {<br \\\/>if (state) {<br \\\/>document.getElementById(\\\"password\\\").setAttribute(\\\"type\\\", \\\"password\\\");<br \\\/>state = false;<br \\\/>} else {<br \\\/>document.getElementById(\\\"password\\\").setAttribute(\\\"type\\\", \\\"text\\\");<br \\\/>state = true;<br \\\/>}<br \\\/>}<\\\/pre><p>In this example, we use a <code>state<\\\/code> variable to keep track of whether the password is currently shown or hidden. The <code>toggle<\\\/code> function changes the type attribute of the password input field with an ID of &#8220;password&#8221; from &#8220;password&#8221; to &#8220;text&#8221; or vice versa, depending on the current state.<\\\/p><p>The <code>state<\\\/code> variable is updated after each toggle to keep track of the current state. To use this in a HTML page, you would need to add an input field with the <code>id<\\\/code> attribute set to &#8220;password&#8221; and a button or other element that calls the <code>toggle<\\\/code> function when it is clicked.<\\\/p>\"}},{\"@type\":\"Question\",\"name\":\"Javascript Show\\\/Hide toggle button for password field\",\"acceptedAnswer\":{\"@type\":\"Answer\",\"text\":\"<p>Here&#8217;s a complete HTML, CSS, and JavaScript example of how to create a toggle button to show and hide a password input field:<\\\/p><pre>&lt;div&gt;<br \\\/>&lt;input type=\\\"password\\\" id=\\\"password\\\"&gt;<br \\\/>&lt;button id=\\\"toggleBtn\\\" onclick=\\\"toggle()\\\"&gt;Show &lt;\\\/button&gt;<br \\\/>&lt;\\\/div&gt;<\\\/pre><pre>var state = false;<br \\\/><br \\\/>function toggle() {<br \\\/>if (state) {<br \\\/>document.getElementById(\\\"password\\\").setAttribute(\\\"type\\\", \\\"password\\\");<br \\\/>document.getElementById(\\\"toggleBtn\\\").innerHTML = \\\"Show\\\";<br \\\/>state = false;<br \\\/>} else {<br \\\/>document.getElementById(\\\"password\\\").setAttribute(\\\"type\\\", \\\"text\\\");<br \\\/>document.getElementById(\\\"toggleBtn\\\").innerHTML = \\\"Hide\\\";<br \\\/>state = true;<br \\\/>}<br \\\/>}<\\\/pre><pre>div {<br \\\/>display: flex;<br \\\/>align-items: center;<br \\\/>}<br \\\/><br \\\/>input[type=\\\"password\\\"] {<br \\\/>margin-right: 10px;<br \\\/>}<br \\\/><br \\\/>button {<br \\\/>background-color: lightgray;<br \\\/>border: none;<br \\\/>padding: 5px 10px;<br \\\/>}<\\\/pre><p>This will create a password input field with a toggle button next to it. The JavaScript function <code>toggle<\\\/code> changes the type attribute of the password input field from &#8220;password&#8221; to &#8220;text&#8221; or vice versa, depending on the current state.<\\\/p><p>The text on the button is updated to reflect the current state (either &#8220;Show&#8221; or &#8220;Hide&#8221;). The CSS is optional and is used to style the appearance of the input field and button.<\\\/p>\"}},{\"@type\":\"Question\",\"name\":\"Show and Hide Password With Eye Icon using HTML\",\"acceptedAnswer\":{\"@type\":\"Answer\",\"text\":\"<p>Here&#8217;s an example of how to show and hide a password input field using an eye icon in HTML:<\\\/p><pre>&lt;div class=\\\"password-container\\\"&gt;<br \\\/>&lt;input type=\\\"password\\\" id=\\\"password\\\"&gt;<br \\\/>&lt;span class=\\\"show-password\\\" onclick=\\\"toggle()\\\"&gt;<br \\\/>&lt;i class=\\\"fas fa-eye\\\" id=\\\"eye\\\"&gt;&lt;\\\/i&gt;<br \\\/>&lt;\\\/span&gt;<br \\\/>&lt;\\\/div&gt;<\\\/pre><pre>var state = false;<br \\\/><br \\\/>function toggle() {<br \\\/>if (state) {<br \\\/>document.getElementById(\\\"password\\\").setAttribute(\\\"type\\\", \\\"password\\\");<br \\\/>document.getElementById(\\\"eye\\\").classList.remove(\\\"fa-eye-slash\\\");<br \\\/>document.getElementById(\\\"eye\\\").classList.add(\\\"fa-eye\\\");<br \\\/>state = false;<br \\\/>} else {<br \\\/>document.getElementById(\\\"password\\\").setAttribute(\\\"type\\\", \\\"text\\\");<br \\\/>document.getElementById(\\\"eye\\\").classList.remove(\\\"fa-eye\\\");<br \\\/>document.getElementById(\\\"eye\\\").classList.add(\\\"fa-eye-slash\\\");<br \\\/>state = true;<br \\\/>}<br \\\/>}<\\\/pre><pre>.password-container {<br \\\/>position: relative;<br \\\/>}<br \\\/><br \\\/>input[type=\\\"password\\\"] {<br \\\/>padding-right: 40px;<br \\\/>}<br \\\/><br \\\/>.show-password {<br \\\/>position: absolute;<br \\\/>right: 10px;<br \\\/>top: 50%;<br \\\/>transform: translateY(-50%);<br \\\/>cursor: pointer;<br \\\/>}<br \\\/><br \\\/>.fa-eye, .fa-eye-slash {<br \\\/>font-size: 18px;<br \\\/>}<\\\/pre><p>This example uses Font Awesome icons to display an eye icon to toggle the visibility of the password. The JavaScript <code>toggle<\\\/code> function changes the type attribute of the password input field and updates the eye icon accordingly.<\\\/p><p>The CSS is optional and is used to position the eye icon and style the appearance of the input field. To use this example, you need to include Font Awesome icons in your project.<\\\/p>\"}}]}<\/script>\n\t\t\t\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>Do you want to create Show and hide password using JavaScript? In this article you will know how to create show password eye icon javascript. This type of toggle password visibility eye can be found in various login or registration forms. Where the user can hide and show them after inputting the password. show\/hide password [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":2152,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"ocean_post_layout":"","ocean_both_sidebars_style":"","ocean_both_sidebars_content_width":0,"ocean_both_sidebars_sidebars_width":0,"ocean_sidebar":"","ocean_second_sidebar":"","ocean_disable_margins":"enable","ocean_add_body_class":"","ocean_shortcode_before_top_bar":"","ocean_shortcode_after_top_bar":"","ocean_shortcode_before_header":"","ocean_shortcode_after_header":"","ocean_has_shortcode":"","ocean_shortcode_after_title":"","ocean_shortcode_before_footer_widgets":"","ocean_shortcode_after_footer_widgets":"","ocean_shortcode_before_footer_bottom":"","ocean_shortcode_after_footer_bottom":"","ocean_display_top_bar":"default","ocean_display_header":"default","ocean_header_style":"","ocean_center_header_left_menu":"","ocean_custom_header_template":"","ocean_custom_logo":0,"ocean_custom_retina_logo":0,"ocean_custom_logo_max_width":0,"ocean_custom_logo_tablet_max_width":0,"ocean_custom_logo_mobile_max_width":0,"ocean_custom_logo_max_height":0,"ocean_custom_logo_tablet_max_height":0,"ocean_custom_logo_mobile_max_height":0,"ocean_header_custom_menu":"","ocean_menu_typo_font_family":"","ocean_menu_typo_font_subset":"","ocean_menu_typo_font_size":0,"ocean_menu_typo_font_size_tablet":0,"ocean_menu_typo_font_size_mobile":0,"ocean_menu_typo_font_size_unit":"px","ocean_menu_typo_font_weight":"","ocean_menu_typo_font_weight_tablet":"","ocean_menu_typo_font_weight_mobile":"","ocean_menu_typo_transform":"","ocean_menu_typo_transform_tablet":"","ocean_menu_typo_transform_mobile":"","ocean_menu_typo_line_height":0,"ocean_menu_typo_line_height_tablet":0,"ocean_menu_typo_line_height_mobile":0,"ocean_menu_typo_line_height_unit":"","ocean_menu_typo_spacing":0,"ocean_menu_typo_spacing_tablet":0,"ocean_menu_typo_spacing_mobile":0,"ocean_menu_typo_spacing_unit":"","ocean_menu_link_color":"","ocean_menu_link_color_hover":"","ocean_menu_link_color_active":"","ocean_menu_link_background":"","ocean_menu_link_hover_background":"","ocean_menu_link_active_background":"","ocean_menu_social_links_bg":"","ocean_menu_social_hover_links_bg":"","ocean_menu_social_links_color":"","ocean_menu_social_hover_links_color":"","ocean_disable_title":"default","ocean_disable_heading":"default","ocean_post_title":"","ocean_post_subheading":"","ocean_post_title_style":"","ocean_post_title_background_color":"","ocean_post_title_background":0,"ocean_post_title_bg_image_position":"","ocean_post_title_bg_image_attachment":"","ocean_post_title_bg_image_repeat":"","ocean_post_title_bg_image_size":"","ocean_post_title_height":0,"ocean_post_title_bg_overlay":0.5,"ocean_post_title_bg_overlay_color":"","ocean_disable_breadcrumbs":"default","ocean_breadcrumbs_color":"","ocean_breadcrumbs_separator_color":"","ocean_breadcrumbs_links_color":"","ocean_breadcrumbs_links_hover_color":"","ocean_display_footer_widgets":"default","ocean_display_footer_bottom":"default","ocean_custom_footer_template":"","ocean_post_oembed":"","ocean_post_self_hosted_media":"","ocean_post_video_embed":"","ocean_link_format":"","ocean_link_format_target":"self","ocean_quote_format":"","ocean_quote_format_link":"post","ocean_gallery_link_images":"on","ocean_gallery_id":[],"footnotes":""},"categories":[40,12,115,14,13,114],"tags":[268,267,269],"class_list":["post-2150","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-best_javascript","category-css","category-hide-password","category-html","category-javascript","category-show-hide-password","tag-show-hide-password-2","tag-show-hide-password","tag-show-hide-password-toggle","entry","has-media"],"_links":{"self":[{"href":"https:\/\/foolishdeveloper.com\/wp-json\/wp\/v2\/posts\/2150","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/foolishdeveloper.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/foolishdeveloper.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/foolishdeveloper.com\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/foolishdeveloper.com\/wp-json\/wp\/v2\/comments?post=2150"}],"version-history":[{"count":14,"href":"https:\/\/foolishdeveloper.com\/wp-json\/wp\/v2\/posts\/2150\/revisions"}],"predecessor-version":[{"id":2333,"href":"https:\/\/foolishdeveloper.com\/wp-json\/wp\/v2\/posts\/2150\/revisions\/2333"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/foolishdeveloper.com\/wp-json\/wp\/v2\/media\/2152"}],"wp:attachment":[{"href":"https:\/\/foolishdeveloper.com\/wp-json\/wp\/v2\/media?parent=2150"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/foolishdeveloper.com\/wp-json\/wp\/v2\/categories?post=2150"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/foolishdeveloper.com\/wp-json\/wp\/v2\/tags?post=2150"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}