How do I place an eye icon that can reveal or hide password inside the input?

Asked

Viewed 217 times

-1

How do I make to replace the button of Ver ou ocultar senha by an eye inside the Password input (at the end of the right side)? I’m not very good at front-end and remembering that attribute title shall not be amended or <input> nor the icon of the eye.

function viewSenha(){
			var tipo = document.getElementById("senha")
			if (tipo.type == "password") {
				tipo.type = "text";
			}else{
				tipo.type = "password";
			}
		}
<p> Senha: <input type="password" name="senha" id="senha" title="Campo para inserir a senha de login do funcionário" size="30" maxlength="32" required=""> <button type="button" title="Ver ou ocultar senha" onclick="viewSenha()"> Ver ou ocultar senha </button> </p>

  • use css, you can use the property background or background-image

2 answers

1

Here is a simple option, using a img within the btn, plain as that...

I gave a all: unset to clear all standard button styles user-agent and put the image inside, since inside a <button> is allowed Flow Content (tag <img>)

The padding that I put in the input is for the text not to go to the end, thus getting covered, because the btn would be on top... I left the comment in CSS below.

function viewSenha(){
  var tipo = document.getElementById("senha")
  if (tipo.type == "password") {
    tipo.type = "text";
  }else{
    tipo.type = "password";
  }
}
#senha {
  /* esse valor deve ser o mesmo do margin left aplicado no btn abaixo */
  padding-right: 30px; 
}
#senha + button,
#senha + button:hover,
#senha + button:focus {
  all: unset;
  position: relative;
  margin-left: -30px;
  cursor: pointer;
}
<p> Senha: 
  <input type="password" name="senha" id="senha" title="Campo para inserir a senha de login do funcionário" size="30" maxlength="32" required=""> 
  <button type="button" title="Ver ou ocultar senha" onclick="viewSenha()">
    <img src="https://unsplash.it/16/16">
  </button> 
</p>

0


I’m going to leave a very simple example just by complementing the answer from @hugocsl, using icons from font-awesome implementing an icon exchange as you click:

var tipo = document.getElementById('senha')

document.getElementById('pass').addEventListener('click', () => {
  if(tipo.value) {
    tipo.type == 'password' ? tipo.type = 'text' : tipo.type = 'password';
    tipo.focus()
    document.getElementById('pass').style.display = 'none';
    document.getElementById('text').style.display = 'inline-block';
  }
})

document.getElementById('text').addEventListener('click', () => {
  if(tipo.value) {
    tipo.type == 'text' ? tipo.type = 'password' : tipo.type = 'text';
    tipo.focus()
    document.getElementById('text').style.display = 'none';
    document.getElementById('pass').style.display = 'inline-block';
  }
})
@import 'https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css';

i {
  margin-left: -25px;
  cursor: pointer;
}

#text {
  display: none;
}
<p> Senha:
  <input type="password" name="senha" id="senha" title="Campo para inserir a senha de login do funcionário" size="30" maxlength="32" required="">
  <i class="fa fa-eye" id="text"></i>
  <i class="fa fa-eye-slash" id="pass"></i>
</p>

OBS : In my example the CSS was just to make the same example, I do not know if it is the best there for your case. OBS : If you want to use images instead the javascript logic would be the same.

  • Your code got interesting because of the change of icon, I did the way you did only it does not return anything.

  • As such nothing returns?

  • Does not return the icon.

  • Have to see if it imported the font-awesome icons correctly and the font-awesome version, so also the icon classes. Depending on the version you use fa fa-... or fa fa-...

  • I imported the CSS file link into my CSS file.

  • I was able to resolve, more apparently when I went to do this in an update file where there is a request for data in JSON doesn’t work, the password characters are only hidden.

  • Nice that you got, so in this case I’m just going through the files anyway to know.

  • I don’t think I’ll do what I said before, but thanks for your help.

Show 3 more comments

Browser other questions tagged

You are not signed in. Login or sign up in order to post.