Html show hide password

Показать/скрыть пароль

Чтобы включить отображение пароля в поле password нужно заменить атрибут type=»password» на type=»text» , сделать это можно на jQuery или чистом JS.

Показать пароль по чекбоксу

$('body').on('click', '.password-checkbox', function() < if ($(this).is(':checked'))< $('#password-input').attr('type', 'text'); >else < $('#password-input').attr('type', 'password'); >>); 

Результат:

Показать пароль по ссылке

$('body').on('click', '.password-control', function() < if ($('#password-input').attr('type') == 'password')< $(this).html('Скрыть пароль'); $('#password-input').attr('type', 'text'); >else < $(this).html('Показать пароль'); $('#password-input').attr('type', 'password'); >return false; >); 

Результат:

Показать пароль по иконке

.password < position: relative; >.password-control < position: absolute; top: 11px; right: 6px; display: inline-block; width: 20px; height: 20px; background: url(/view.svg) 0 0 no-repeat; >.password-control.view < background: url(/no-view.svg) 0 0 no-repeat; >

$('body').on('click', '.password-control', function() < if ($('#password-input').attr('type') == 'password')< $(this).addClass('view'); $('#password-input').attr('type', 'text'); >else < $(this).removeClass('view'); $('#password-input').attr('type', 'password'); >return false; >);

Результат:

Без jQuery

function show_hide_password(target) < var input = document.getElementById('password-input'); if (input.getAttribute('type') == 'password') < target.classList.add('view'); input.setAttribute('type', 'text'); >else < target.classList.remove('view'); input.setAttribute('type', 'password'); >return false; >

Результат:

Комментарии

Другие публикации

Если добавить атрибут contenteditable к элементу, его содержимое становится доступно для редактирования пользователю, а.

По спецификации HTML в option нельзя вставить ссылку, если все-таки её туда вставить, то работать она не будет. В таких случаях можно сделать перенаправление браузера по клику на JS или имитацию.

Источник

Show/Hide Password With Eye Icon using HTML And JavaScript

Welcome to the Codewithrandom blog. In this blog, We learn how to create Show and Hide a Password With an Eye Icon. We use HTML, CSS, and JavaScript for this Show and Hide Password With Eye Icon. We have an input field with a password tag and an eye icon for showing or hiding passwords in the input field using JavaScript.

I hope you enjoy our blog so let’s start with a basic html structure for a Show and Hide Password With an Eye Icon.

Show/hide Password Eye Icon Html Code:-

Create your html file first, then paste this code into the html head area or add the Font Awesome CDN link to it. We need font awesome CDN in order for the eye icon in input to display conceal the password.

Do you want to learn HTML to JavaScript? 🔥

If yes, then here is our Master Frontend: Zero to Hero eBook! 📚 In this eBook, you’ll learn complete HTML, CSS, Bootstrap, and JavaScript from beginner to advance level. 💪 It includes 450 Projects with source code.

CDN link with Link Tag

Now to add the structure for our show/hide password.Using the tag we will create the a password field and using the input tag with type as password we will create an input field for the password and using the font awesome tag we will add the eye icon for showing the password.

There is all the html code for the Show and Hide Password With Eye Icon. Now, you can see output without Css and JavaScript. then we write Css for styling and add javascript code for the show to hide the password.

Html Code Output:-

CSS Code for Styling Eye Icon In Password Field:-

* < padding: 0; margin: 0; box-sizing: border-box; >body < width: 100%; min-height: 100vh; display: flex; justify-content: center; align-items: center; background-color: #f4f4f4; flex-direction: column; >body .password-field < position: relative; >body .password-field input < width: 30rem; height: 4em; padding: 1em; border: 0; border-radius: 10px; box-shadow: 0px 10px 40px rgba(0, 0, 0, 0.5); font-size: 1rem; letter-spacing: 1px; >body .password-field input::placeholder < color: #000; font-weight: bold; >body .password-field #toggler

Step1:We will change the padding and margin to “zero” using the universal tag selector (*), and we will set the box size to border-box using the box-sizing property.

Now that we have selected the body element, we will set the width to “100%” of the body, the display property to “flex,” the align item property to “centre,” the font-color property to “white,” and the display property to “flex.” We will also align all of the text using these properties.

Step2:The input area will now have styling added. Using the class selector, we will choose the input field. Then, using the width and height properties, we will fix the width to “30 rem” and the height to “4 em,” respectively. Additionally, we’ll change the border radius to “30 px” using the border-radius property.

body .password-field input < width: 30rem; height: 4em; padding: 1em; border: 0; border-radius: 10px; box-shadow: 0px 10px 40px rgba(0, 0, 0, 0.5); font-size: 1rem; letter-spacing: 1px; >body .password-field input::placeholder < color: #000; font-weight: bold; >body .password-field #toggler

Now we have completed our Styling Of Input and eye icon. Here is our updated output HTML+ CSS.

HTML+ CSS Code Output:-

Источник

Hide/Show Password using Eye icon in HTML and JavaScript

In this tutorial, I will learn how to hide and show password using eye icon in HTML and JavaScript. I implemented it for one of my projects as below.

This very useful feature you should have on your login form.

There are simple two steps to follow. First, create the HTML login form. Secondly, show/hide password when the user clicks on the eye icon.

Watch live demo

Don’t miss any of such tips…

Let’s see it step-by-step. I will walk you through the complete code.

1. Create HTML Login form with Eye Icon

We are going to place the eye icon inside the password text field. We can use the eye icon from the awesome font script library.

First of all import the awesome font Stylesheet into your HTML form page.

Use the tag to display the eye icon. This icon is also known as the visibility eye icon.

Use the below CSS to put the eye icon at the end of the password text field.

margin-left: -30px; cursor: pointer;

If you are new to CSS, refer to how to add CSS in HTML.

Put this tag below the passwords input field. This is how the sample form will look like with the password field.

2. Add JavaScript to Toggle Show/Hide Password

Copy and paste the below code into your JavaScript. This code is self-explanatory if you are familiar with the JavaScript basics.

const togglePassword = document.querySelector('#togglePassword'); const password = document.querySelector('#id_password'); togglePassword.addEventListener('click', function (e) < // toggle the type attribute const type = password.getAttribute('type') === 'password' ? 'text' : 'password'; password.setAttribute('type', type); // toggle the eye slash icon this.classList.toggle('fa-eye-slash'); >);

You can also insert this code in your HTML page with tag.

Show/Hide Password in Django

In the sample picture shown above, I have implemented it for one of my websites developed using the Django Python framework. If you are developing it for Django, refer registration and login form in Django.

That’s all. Now you can hide and show password using eye icon in HTML with simple JavaScript and CSS code.

If you find any difficulties or need any customization, let me know in the comment section below.

Источник

Show Hide Password With Eye Icon Using HTML and JavaScript

In This Article, We Create A Fantastic Show Hide Password With An Eye Icon And Unique Animation. We Use Html, Css, And Javascript To Show and Hide Passwords With Eye Icon. So Let’s Make It And Start Writing Our Html Code For The Basic Template.

One of the first things that comes to mind when considering sensitive data is a password. Because of this, the majority of websites and apps mask (or disguise) your password when you register or log in so that it cannot be seen by unauthorised parties. However, it’s best practise to include a show/hide button in password fields so users can see what they’re typing in order to prevent errors.

Do you want to learn HTML to JavaScript? 🔥

If yes, then here is our Master Frontend: Zero to Hero eBook! 📚 In this eBook, you’ll learn complete HTML, CSS, Bootstrap, and JavaScript from beginner to advance level. 💪 It includes 450 Projects with source code.

So here is a preview with only Html code👇

Lets Style Using Css Code

Css Code For Show Hide Password With Eye Icon

:root < --light-grey: #e0e0e0; --dark-grey: #c5c5c5; >body < margin: 0; padding: 0; width: 100%; height: 100vh; display: flex; justify-content: center; align-items: center; background: var(--light-grey); font-family: monospace, Arial, Helvetica, sans-serif; >body * < box-sizing: border-box; outline: none; >.container < width: 210px; position: relative; >input < background: #ececec; border: 0; font-size: 1em; width: 100%; box-shadow: 0.15em 0.15em 0.25em var(--dark-grey) inset, -0.15em -0.15em 0.25em #ffffff80 inset, 0.3em 0.3em 0.6em var(--dark-grey), -0.2em -0.2em 0.5em #ffffff80; border-radius: 4px; padding: 10px; position: absolute; z-index: 1; height: 40px; color: #808080; font-family: monospace, Arial, Helvetica, sans-serif; >input::placeholder < color: #808080; opacity: 1; >input:-ms-input-placeholder < color: #808080; >input::-ms-input-placeholder < color: #808080; >input.active < animation: scanning 1s ease 0s 1; background: linear-gradient(90deg, #02de0b 50%, #ececec 100%); background-repeat: no-repeat; background-position: -210px; background-color: #ececec; >@keyframes scanning < 0% < background-position: 150px; >100% < background-position: -210px; >> #reveal < width: 40px; height: 40px; border-radius: 4px; border: 0; background: linear-gradient(145deg, #72c0ff, #0070ca); cursor: pointer; position: absolute; z-index: 3; right: 0px; box-shadow: 0.3em 0.3em 0.6em var(--dark-grey), -0.2em -0.2em 0.5em #fff; border: 2px solid var(--light-grey); transition: all 0.5s ease 0s; border-top-color: #cccccc; border-bottom-color: #eee; >#reveal:before < content: ""; background: radial-gradient( circle at center, #00000080 1px, #00000080 2px, #00000080 3px, #00000080 4px ); width: 18px; height: 18px; border-radius: 0 100%; transform: rotate(-45deg) skew(-10deg, -10deg); left: 9px; position: absolute; top: 9px; transition: all 0.25s ease 0s; >#reveal:after < content: ""; width: 20px; height: 18px; border-radius: 100%; left: 6px; top: 4px; position: absolute; border: 2px dotted #fff0; border-bottom-color: #00000080; transition: all 0.25s ease 0s; >#reveal:disabled < transition: all 0.5s ease 0s; background: linear-gradient(145deg, #ced5e0, #757575) !important; cursor: default; >#reveal.open < transition: all 0.5s ease 0s; background: linear-gradient(145deg, #8ce88f, #009205); >#reveal.open:after < transform: rotateX(-180deg); top: 10px; background: radial-gradient( circle at 50% 12px, #00000000 1px, #ececec 2px, #ffffff 3px, #00000000 4px ); >#reveal span:before < display: none; font-family: monospace; >#reveal:hover span:before < content: "Show Password"; display: block; position: absolute; background: #4fa8ef; top: -4.5em; padding: 0.45em 0.5em; left: -0.9em; border-radius: 2px; font-size: 0.85em; color: #1d4c72; min-height: 2.25em; >#reveal:hover span:after < content: ""; display: block; position: absolute; border: 0.7em solid transparent; border-top-color: #4fa8ef; left: 0.7em; top: -1.15em; >#reveal.open:hover span:before < content: "Hide Password"; background: #61cd64 !important; color: #215d23; >#reveal.open:hover span:after < border-top-color: #61cd64; >#reveal[disabled="disabled"]:hover span:before < content: "Empty Password"; background: #b3b8c0 !important; color: #4d4e51; >#reveal[disabled="disabled"]:hover span:after < border-top-color: #b3b8c0; >#fakepass < font-size: 1em; width: 0%; border-radius: 4px 0 0 4px; position: absolute; background: #ececec; z-index: 2; height: 40px; top: 0; right: 0; left: 0; transition: all 1s ease 0s; width: 0; line-height: 40px; text-indent: 10px; overflow: hidden; box-shadow: 0.15em 0.15em 0.25em var(--dark-grey) inset, -0.15em -0.15em 0.25em #ffffff80 inset; animation: scan-hide 1s ease-out 0s 1; color: #808080; >#fakepass:before < content: ""; height: 40px; width: 0px; position: absolute; right: 13px; top: 0; box-shadow: -10px 0 20px 10px #33a4ffad, 0 0 10px 5px #33a4ffab; >#fakepass.scan < display: block; animation: scan-show 1s ease-out 0s 1; width: 0%; left: 0; >#fakepass.scan:before < display: none; >#fakepass:after < content: ""; height: 40px; width: 2px; background: #92ceff; position: absolute; right: 10px; top: 0; box-shadow: 0 0 3px 1px #33a4ff, 0 0 5px 3px #33a4ff; animation: light 0.15s ease 0s infinite; >#fakepass.scan:after < background: #07ff10; box-shadow: 0 0 3px 1px #00cc08, 0 0 5px 3px #00cc08; right: 5px; >@keyframes light < 50% < opacity: 0.5; >> @keyframes scan-show < 0% < width: 100%; >100% < width: 0%; >> @keyframes scan-hide < 0% < width: 0%; left: 0; right: inherit; >98% < width: 100%; left: 0; right: inherit; >99% < width: 100%; left: inherit; right: 0; >100% < width: 0%; left: inherit; right: 0; >> @-moz-document url-prefix() < #fakepass < text-shadow: 0 0 2px #666, 0 0 2px #666, 0 0 2px #666, 0 0 2px #666, 0 0 2px #666, 0 0 2px #666, 0 0 2px #666, 0 0 2px #666; >>

We write this whole code to style our show hide password with an eye icon. In css, we use variables to use the same theme color. Then we style our input section 🔥because the input section is the central part of this project. Then we style a button that helps to show the hide button. We use before and after styling selectors for better styling🥶.

We tried to add a simple styling to our show and hide project and i want you guys to try out and try adding your style this will help you in gaining some css concepts . It will help you in future by remembering the css concepts you will easily add styling to any other projects easily.

Here is a preview but it’s not working well because we have not javascript till now. So let’s add javascript code to complete our show hide password with an eye icon👇.

Css Updated Output

let’s write javascript Code for running animation and show hide password with scanning animation.

Javascript Code For Show Hide Password With Eye Icon

var btn = document.getElementById('reveal'); var box = document.getElementById('pass'); var fak = document.getElementById('fakepass'); const isEmpty = str => !str.trim().length; btn.addEventListener('click', function() < fak.innerHTML=''; var x = box.value.length; for(var i=0; ifak.classList.toggle('scan'); this.classList.toggle('open'); box.classList.toggle('active'); (box.type=='password') ? box.type='text' : setTimeout(function()< box.type='password' >, 500);; >); box.addEventListener("input", function() < if(!isEmpty(this.value)) btn.removeAttribute('disabled'); else btn.setAttribute('disabled', 'disabled'); >);

That’s it for our project. We write all our code to show hide password functionality. In javascript first, we access all Html elements then add an event listener to work when a user clicks on show hide the password.

Here is the final preview of the project, you can see when the page loads a scanning animation scan input field. If we click show password a green scan line scan password and text show🤯.

Final Output

Video Output:

Hope you like this project, we create your own and use this project in any project as a part project like the reviews section, and a contact form. If you need any more project-related frontend. Visit our homepage and you get 100+ projects💝.

if you have any confusion Comment below or you can contact us by filling out our contact us form from the home section. 🤞🎉

was written by – Codewithrandom

Which code editor do you use for this Show Hide Password With Eye Icon coding?

I personally recommend using VS Code Studio, it’s straightforward and easy to use.

is this project responsive or not?

Yes! this project is a responsive project.

Источник