par
filou80 » 20 avr. 2023, 22:11
Bonjour à tous,
J'ai besoin d'aide par rapport a la mise en forme je souhaite que mon oeil soit au bout de mon input (balise i).
cela le fait mais cela fait un block aussi grand que mon input.
J'utilise bootstrap je sais pas ci cela peut aider.
Voici mon html :
Code : Tout sélectionner
<div class="col-8 input-group">
<div class="input-group-text iconesConnexionInscription">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-lock" viewBox="0 0 16 16">
<path d="M8 1a2 2 0 0 1 2 2v4H6V3a2 2 0 0 1 2-2zm3 6V3a3 3 0 0 0-6 0v4a2 2 0 0 0-2 2v5a2 2 0 0 0 2 2h6a2 2 0 0 0 2-2V9a2 2 0 0 0-2-2zM5 8h6a1 1 0 0 1 1 1v5a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1V9a1 1 0 0 1 1-1z"/>
</svg>
</div>
<input type="password"
name="password"
autocomplete="off"
class="form-control"
maxlength="22"
id="pass"
oninput="hiddenscript()"
required="">
<i class="fas fa-eye form-control" id="eye" onclick="Showfunction()"></i>
</div>
voici mon css :
Code : Tout sélectionner
/* .fas {
display: block;
float: right;
margin-right: 15px;
margin-top: -45px;
position: relative;
color: #555;
font-size: 23px;
cursor: pointer;
z-index: 3;
display: none;
} */
/* #eye {
display: none;
} */
#eye {
/* position: relative; */
/* margin-left: -30px;
margin-top: -28px; */
color: #555;
font-size: 23px;
cursor: pointer;
/* z-index: 3; */
}
voici mon JS :
Code : Tout sélectionner
function hiddenscript() {
var eye = document.getElementById("eye");
if (document.getElementById("pass").value.trim().length == 0) {
eye.style.display = "none";
} else {
eye.style.display = "block";
}
}
function Showfunction() {
var eye = document.getElementById("eye");
var eye2 = document.getElementById("eye2");
var pass = document.getElementById("pass");
var value = document.getElementById('pass').value;
if (value.length > 0) {
eye.style.display = "block";
}
if (pass.type === "password") {
pass.type = "text";
eye.classList.toggle('fa-eye');
eye.classList.toggle('fa-eye-slash');
} else {
pass.type = "password";
eye.classList.toggle('fa-eye');
eye.classList.toggle('fa-eye-slash');
}
}
Merci par avance pour votre aide.
@+ Filou
Bonjour à tous,
J'ai besoin d'aide par rapport a la mise en forme je souhaite que mon oeil soit au bout de mon input (balise i).
cela le fait mais cela fait un block aussi grand que mon input.
J'utilise bootstrap je sais pas ci cela peut aider.
Voici mon html :
[code]
<div class="col-8 input-group">
<div class="input-group-text iconesConnexionInscription">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-lock" viewBox="0 0 16 16">
<path d="M8 1a2 2 0 0 1 2 2v4H6V3a2 2 0 0 1 2-2zm3 6V3a3 3 0 0 0-6 0v4a2 2 0 0 0-2 2v5a2 2 0 0 0 2 2h6a2 2 0 0 0 2-2V9a2 2 0 0 0-2-2zM5 8h6a1 1 0 0 1 1 1v5a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1V9a1 1 0 0 1 1-1z"/>
</svg>
</div>
<input type="password"
name="password"
autocomplete="off"
class="form-control"
maxlength="22"
id="pass"
oninput="hiddenscript()"
required="">
<i class="fas fa-eye form-control" id="eye" onclick="Showfunction()"></i>
</div>
[/code]
voici mon css :
[code]
/* .fas {
display: block;
float: right;
margin-right: 15px;
margin-top: -45px;
position: relative;
color: #555;
font-size: 23px;
cursor: pointer;
z-index: 3;
display: none;
} */
/* #eye {
display: none;
} */
#eye {
/* position: relative; */
/* margin-left: -30px;
margin-top: -28px; */
color: #555;
font-size: 23px;
cursor: pointer;
/* z-index: 3; */
}
[/code]
voici mon JS :
[code]
function hiddenscript() {
var eye = document.getElementById("eye");
if (document.getElementById("pass").value.trim().length == 0) {
eye.style.display = "none";
} else {
eye.style.display = "block";
}
}
function Showfunction() {
var eye = document.getElementById("eye");
var eye2 = document.getElementById("eye2");
var pass = document.getElementById("pass");
var value = document.getElementById('pass').value;
if (value.length > 0) {
eye.style.display = "block";
}
if (pass.type === "password") {
pass.type = "text";
eye.classList.toggle('fa-eye');
eye.classList.toggle('fa-eye-slash');
} else {
pass.type = "password";
eye.classList.toggle('fa-eye');
eye.classList.toggle('fa-eye-slash');
}
}
[/code]
Merci par avance pour votre aide.
@+ Filou