HTML Clicar em img e mostrar ou esconder pass

Joel Martins · 30 de julho de 2021

Boas,

Eu estava a tentar fazer um input onde se inseri-se uma pass e depois existisse uma img ao lado e ao clicar mostrar ou esconder a pass e ao mesmo tempo mudar a img onde cliquei para outra. Acho que não me estou a conseguir expressar corretamente mas ao ver o código espero que fique mais ilucidado.

<html>
    <head>
        <title>Sign Up</title>
        <link rel="stylesheet" href="sign_up_.css">
        <meta name='viewport' content='width=device-width, initial-scale=1.0'>
    </head>
    <body>
        <h1 class="r1">Registo</h1>
        <h2 class="r2">Regista-te agora e torna-te membro da Panda Team!!</h2>
        <form class="form" action="insert.php" method="POST" autocomplete="off">
            <div class="user">
                <label>Username</label><br>
                <input type="text" name="user" placeholder="Utilizador">
            </div>
            <div class="pass">
                <label>Password</label><br>
                <input type="password" name="pass1" placeholder="●●●●●●">
                <br>
                <br>
                <label>Re-enter Password</label><br>
                <div class="repass">
                    <input type="password" name="pass2" placeholder="●●●●●●"style="border:none;">
                    <img class="eye" id="eye" src="../../img/buttons/closed_eye_.png" onclick="myFunction()"/>
                </div>
            </div>
            <input type="submit" class="send" name="submit" value="Registar" >
        </form>
        <?php
        if (isset($_GET["msg"]) and $_GET["msg"] == 'failed')
        {
            echo "<p class='error' >Passwords Don't match!!</p>";
        }?>
        <script>
            function myFunction()
            {
                var x = document.getElementById("myInput");
                if (x.type === "password")
                {
                    x.type = "text";
                    if (element.src == "../../img/buttons/closed_eye_.png") 
                    {
                        element.src = "../../img/buttons/open_eye_.png";
                    }
                    else 
                    {
                        element.src = "../../img/buttons/closed_eye_.png";
                    }
                }
                else if( x.type === "text" )
                {
                    x.type = "password";
                    if (element.src == "../../img/buttons/open_eye_.png") 
                    {
                        element.src = "../../img/buttons/closed_eye_.png";
                    }
                    else 
                    {
                        element.src = "../../img/buttons/open_eye_.png";
                    }
                }
            }
        </script>
    </body>
</html>

Css code:

body
{
    background-image: linear-gradient( rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5) ), url("../../img/bambu.jpg");
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-size: cover;
    color:white;
    text-align:center
}

.r1
{
    top:10px;
    position:relative;
    height:fit-content;
    width:fit-content;
    margin: auto;
    text-align:center;
}
.r2
{
    top:30px;
    position:relative;
    height:fit-content;
    width:fit-content;
    margin: auto;
    text-align:center;
}

.user
{
    top:30px;
    position:relative;
    height:fit-content;
    width:fit-content;
    margin: auto;
    text-align:center;
    /*background-color:red;*/
}

.pass
{
    top:30px;
    position:relative;
    height:fit-content;
    width:fit-content;
    margin: auto;
    text-align:center;
    /*background-color:blue;*/
}

.send
{
    top:40px;
    position:relative;
}

.error
{
    color:red;
    font-size:100px;
}

.repass
{
    text-align:center;
    margin-left: auto;
    margin-right: auto;
    background-color:white;
    border: 1px solid #DDD;
    height:100%;
    width:75%;
    border-radius:5px;
}


.eye
{
    width:10%;
    height: auto;
    
    cursor:context-menu;
}

PHP code:

<?php

require"../connect.php";

if(isset($_POST['submit']))
{ 
    // Escape user inputs for security
    $user = $_POST['user'];
    $pass1 = $_POST['pass1'];
    $pass2 = $_POST['pass2'];
    
    if($pass1 == $pass2)
    {
        // Attempt insert query execution
        $sql = "INSERT INTO `login`(`username`, `password`) VALUES ('$user','$pass1')";
        
        if(mysqli_query($conn, $sql))
        {
            echo'
            <script>
                window.location.replace("https://p4ndast0re.000webhostapp.com");
            </script>
                ';
        }
        else
        {
            echo "ERROR: Could not able to execute $sql. " . mysqli_error($conn);
        }
    }
    else
    {
        header("location:sign_up_.php?msg=failed");
    }
}
// Close connection
mysqli_close($conn);
?>

As imgens são estas:

o objetivo era ao clicar

nesta mudar para

esta e automaticamente mostrar a pass e depois para esconder a pass clico nesta e aparece outravez a outra mas com a pass escondida.

Peço desculpa pela confusão e agradeço toda a ajuda possível.

Muito obrigado

Rui Guilherme · 30 de julho de 2021

Você pode fazer isso facilmente usando JavaScript do lado do client:

HTML:

<input type="password" id="senha" />
<button onclick="togglePassword()" id="togglePassword">Mostrar senha</buttonn>

JavaScript:

function togglePassword() {
  const inputPassword = document.querySelector('#senha')
  const btnTogglePassword = document.querySelector('#togglePassword')
  
  const type = inputPassword.getAttribute('type') === 'password' ? 'text' : 'password'
  
  inputPassword.setAttribute('type', type)
  
  // Você só precisa alterar o "button" para o icon do olho, o processo é o mesmo...
  btnTogglePassword.innerText = type === 'text' ? 'Esconder senha' : 'Mostrar senha'
}

Caso queira ver uma demo online: https://codepen.io/ruiguilherme/pen/YzVLaZp?editors=1010

Joel Martins · 30 de julho de 2021

@Rui Guilherme Sim, mas o meu objetivo era fazer isso mas em vez de um botão utilizar uma imagem

Rui Guilherme · 30 de julho de 2021

Como eu falei você pode simplesmente trocar o elemento "button" e continuar usando o evento onClick:

Porém é uma boa pratica usar icones(SVG) nesse caso ou uma imagem otimizada (AVIF, WEBP ou SVG), exemplo:

HTML:

<input type="password" id="senha" />
<i class="bi bi-eye-slash" onclick="togglePassword()" id="togglePassword"></i>

CSS:

#togglePassword {
  cursor: pointer;
}

JS:

function togglePassword() {
  const inputPassword = document.querySelector('#senha')
  const iconTogglePassword = document.querySelector('#togglePassword')
  
  const type = inputPassword.getAttribute('type') === 'password' ? 'text' : 'password'
  
  inputPassword.setAttribute('type', type)
  
  iconTogglePassword.classList.remove(type === 'text' ? 'bi-eye-slash' : 'bi-eye')
  iconTogglePassword.classList.add(type === 'text' ? 'bi-eye' : 'bi-eye-slash')
}

Se você quiser uma demo online: https://codepen.io/ruiguilherme/pen/OJmZEBb

Se você quer usar literalmente imagens <img> (Mesmo não sendo uma boa pratica) então você vai precisar criar uma classe CSS com o atributo "display: none":

.ocultarImagemSenha {
	display: none;
}

Dai você vai pegar essa classe e vai adicionar a imagem que você quer ocultar e vai remover ela da imagem que você quer mostrar. Exatamente como eu fiz no exemplo anterior, você vai usar o imagem1.classList.remove("ocultarImagemSenha") e imagem2.classList.add("ocultarImagemSenha") para fazer um "toggle" nas imagens, uma hora mostra a imagem1 (que indica que a senha está exposta) e outra hora mostra a imagem2 (que indica que a senha não está exposta).

Obs: AMBAS imagens vão ter o evento onClick ou você pode adicionar as imagens dentro de uma <div></div> e colocar o evento onclick nessa <div onclick="togglePassword()">; Porém usar esse segundo metodo pode causar alguns problemas de funcionamento em browsers mais "limitados" tipo o Safari e o Internet Explorer;

Joel Martins · 31 de julho de 2021

@Rui Guilherme Eu tentei agora mesmo e não funciona. O icon e o input aparecem mas a function não funciona.

HTML CODE:

<div class="pass">
	<label for="pass1" >Password</label><br>
    	<input type="password" id="pass1" name="pass1" placeholder="●●●●●●"/>
    		<i class="bi bi-eye-slash" onclick="togglePassword1()" id="togglePassword1"></i>
                
	<label for="pass2" >Re-enter Password</label><br>
		<input type="password" id="senha2" name="pass2" placeholder="●●●●●●"/>
			<i class="bi bi-eye-slash" onclick="togglePassword2()" id="togglePassword2"></i>
</div>

JS CODE:

function togglePassword1() {
  const inputPassword = document.querySelector('#senha1')
  const iconTogglePassword = document.querySelector('#togglePassword1')
  
  const type1 = inputPassword.getAttribute('type') === 'password' ? 'text' : 'password'
  
  inputPassword.setAttribute('type', type1)
  
  iconTogglePassword.classList.remove(type1 === 'text' ? 'bi-eye-slash' : 'bi-eye')
  iconTogglePassword.classList.add(type1 === 'text' ? 'bi-eye' : 'bi-eye-slash')
}


function togglePassword2() {
  const inputPassword = document.querySelector('#senha2')
  const iconTogglePassword = document.querySelector('#togglePassword2')
  
  const type2 = inputPassword.getAttribute('type') === 'password' ? 'text' : 'password'
  
  inputPassword.setAttribute('type', type2)
  
  iconTogglePassword.classList.remove(type2 === 'text' ? 'bi-eye-slash' : 'bi-eye')
  iconTogglePassword.classList.add(type2 === 'text' ? 'bi-eye' : 'bi-eye-slash')
}

Não funciona.

Fico á espera da sua resposta

Rui Guilherme · 31 de julho de 2021

Desculpe, foi um erro meu de explicação... O bi-eye-slash e bi-eye fazem parte do Boostrap você precisa adicionar o icons.boostrap no seu site.

Adiciona isso esse link na na <head> </head> do seu site:

<!DOCTYPE html>
<html>
  <head>
	<!--... resto do código ... -->
	<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/font/bootstrap-icons.css">
  </head>
  <body>
	<!--... resto do código ... -->
  </body>
</html>

Aqui tem uma lista completa com todos os icones do boostrap que você pode usar gratuítamente no seu site:

https://icons.getbootstrap.com/

Joel Martins · 1 de agosto de 2021

@Rui Guilherme essa parte eu já tinha reparado. Mas o que não funciona é a parte do código JS.

Obrigado mais uma vez :))

Boas,

Acabei por encontrar um muito parecido ao seu:

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <style type="text/css">
        input, input[type=password]
        {
            width: 150px;
            height: 20px;
        }
        #toggle_pwd
        {
            cursor: pointer;
        }
    </style>
</head>
<body>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"
        rel="stylesheet" type="text/css" />
    <input type="password" id="txtPassword" />
    <span id="toggle_pwd" class="fa fa-fw fa-eye field_icon"></span>
    <script type="text/javascript">
        $(function () {
            $("#toggle_pwd").click(function () {
                $(this).toggleClass("fa-eye fa-eye-slash");
               var type = $(this).hasClass("fa-eye-slash") ? "text" : "password";
                $("#txtPassword").attr("type", type);
            });
        });
    </script>
</body>
</html>