Ir ao conteúdo
  • Cadastre-se

HTML Clicar em img e mostrar ou esconder pass


Ir à solução Resolvido por Joel Martins,

Posts recomendados

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 

open_eye_.png.77a9fd08e1b875a600645ffe9ef19bf6.png

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

closed_eye_.png.9dd683d9be0ab482c7108967cc978b53.png

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

Muito obrigado

Link para o comentário
Compartilhar em outros sites

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

 

Link para o comentário
Compartilhar em outros sites

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

Link para o comentário
Compartilhar em outros sites

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;

Link para o comentário
Compartilhar em outros sites

@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 :)

Link para o comentário
Compartilhar em outros sites

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/bootstrap-icons@1.5.0/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/

Link para o comentário
Compartilhar em outros sites

  • Solução

@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>

Muito obrigado na mesma por toda a sua ajuda : )

Link para o comentário
Compartilhar em outros sites

Crie uma conta ou entre para comentar

Você precisa ser um usuário para fazer um comentário

Criar uma conta

Crie uma nova conta em nossa comunidade. É fácil!

Crie uma nova conta

Entrar

Já tem uma conta? Faça o login.

Entrar agora

Sobre o Clube do Hardware

No ar desde 1996, o Clube do Hardware é uma das maiores, mais antigas e mais respeitadas comunidades sobre tecnologia do Brasil. Leia mais

Direitos autorais

Não permitimos a cópia ou reprodução do conteúdo do nosso site, fórum, newsletters e redes sociais, mesmo citando-se a fonte. Leia mais

×
×
  • Criar novo...

Redes-Wi-Fi-capa-3d-newsletter.png

EBOOK GRÁTIS!

CLIQUE AQUI E BAIXE AGORA MESMO!