Skip to main content
adicionou 219 caracteres ao conteúdo
Fonte Link

Usando apenas JavaScript, podes adicionar a um elemento, neste caso é a tag img, dois eventos (mousedown e mouseup), estes iram alterar a propriedade type do input, alternando entre text e password.

Veja um exemplo:

document.getElementById('olho').addEventListener('mousedown', function() {
  document.getElementById('pass').type = 'text';
});

document.getElementById('olho').addEventListener('mouseup', function() {
  document.getElementById('pass').type = 'password';
});

// Para que o password não fique exposto apos mover a imagem.
document.getElementById('olho').addEventListener('mousemove', function() {
  document.getElementById('pass').type = 'password';
});
#pass {
  width: 150px;
  padding-right: 20px;
}

.olho {
  cursor: pointer;
  left: 160px;
  position: absolute;
  width: 20px;
}
<img  src="https://cdn0.iconfinder.com/data/icons/ui-icons-pack/100/ui-icon-pack-14-512.png" id="olho" class="olho">
<input type="password" id="pass">

Usando apenas JavaScript, podes adicionar a um elemento, neste caso é a tag img, dois eventos (mousedown e mouseup), estes iram alterar a propriedade type do input, alternando entre text e password.

Veja um exemplo:

document.getElementById('olho').addEventListener('mousedown', function() {
  document.getElementById('pass').type = 'text';
});

document.getElementById('olho').addEventListener('mouseup', function() {
  document.getElementById('pass').type = 'password';
});
#pass {
  width: 150px;
  padding-right: 20px;
}

.olho {
  cursor: pointer;
  left: 160px;
  position: absolute;
  width: 20px;
}
<img  src="https://cdn0.iconfinder.com/data/icons/ui-icons-pack/100/ui-icon-pack-14-512.png" id="olho" class="olho">
<input type="password" id="pass">

Usando apenas JavaScript, podes adicionar a um elemento, neste caso é a tag img, dois eventos (mousedown e mouseup), estes iram alterar a propriedade type do input, alternando entre text e password.

Veja um exemplo:

document.getElementById('olho').addEventListener('mousedown', function() {
  document.getElementById('pass').type = 'text';
});

document.getElementById('olho').addEventListener('mouseup', function() {
  document.getElementById('pass').type = 'password';
});

// Para que o password não fique exposto apos mover a imagem.
document.getElementById('olho').addEventListener('mousemove', function() {
  document.getElementById('pass').type = 'password';
});
#pass {
  width: 150px;
  padding-right: 20px;
}

.olho {
  cursor: pointer;
  left: 160px;
  position: absolute;
  width: 20px;
}
<img src="https://cdn0.iconfinder.com/data/icons/ui-icons-pack/100/ui-icon-pack-14-512.png" id="olho" class="olho">
<input type="password" id="pass">

edit, implementação do olho
Fonte Link

Usando apenas JavaScript, podes adicionar aoa um elemento, neste caso é a tag inputimg, dois eventos (mousedown e mouseup), estes iram alterar a propriedade type do input, alternando entre text e password.

Veja um exemplo:

document.getElementById('pass''olho').addEventListener('mousedown', function() {
  thisdocument.getElementById('pass').type = 'text';
});

document.getElementById('pass''olho').addEventListener('mouseup', function() {
  thisdocument.getElementById('pass').type = 'password';
});
#pass {
  width: 150px;
  padding-right: 20px;
}

.olho {
  cursor: pointer;
  left: 160px;
  position: absolute;
  width: 20px;
}
<input type="password" id="pass"> Clique<img no camposrc="https://cdn0.iconfinder.com/data/icons/ui-icons-pack/100/ui-icon-pack-14-512.png" paraid="olho" mostrarclass="olho">
<input atype="password" senha.id="pass">

Usando apenas JavaScript, podes adicionar ao input dois eventos (mousedown e mouseup), estes iram alterar a propriedade type do input, alternando entre text e password.

Veja um exemplo:

document.getElementById('pass').addEventListener('mousedown', function() {
  this.type = 'text';
});

document.getElementById('pass').addEventListener('mouseup', function() {
  this.type = 'password';
});
<input type="password" id="pass"> Clique no campo para mostrar a senha.

Usando apenas JavaScript, podes adicionar a um elemento, neste caso é a tag img, dois eventos (mousedown e mouseup), estes iram alterar a propriedade type do input, alternando entre text e password.

Veja um exemplo:

document.getElementById('olho').addEventListener('mousedown', function() {
  document.getElementById('pass').type = 'text';
});

document.getElementById('olho').addEventListener('mouseup', function() {
  document.getElementById('pass').type = 'password';
});
#pass {
  width: 150px;
  padding-right: 20px;
}

.olho {
  cursor: pointer;
  left: 160px;
  position: absolute;
  width: 20px;
}
<img  src="https://cdn0.iconfinder.com/data/icons/ui-icons-pack/100/ui-icon-pack-14-512.png" id="olho" class="olho">
<input type="password" id="pass">

Fonte Link

Usando apenas JavaScript, podes adicionar ao input dois eventos (mousedown e mouseup), estes iram alterar a propriedade type do input, alternando entre text e password.

Veja um exemplo:

document.getElementById('pass').addEventListener('mousedown', function() {
  this.type = 'text';
});

document.getElementById('pass').addEventListener('mouseup', function() {
  this.type = 'password';
});
<input type="password" id="pass"> Clique no campo para mostrar a senha.