[RESOLU] Modifier oeil au clic

18 avr. 2023, 18:56

Bonjour,

dans un input password j'ai mis un œil barré quand le code est masqué et un œil ouvert quand le code est en clair.

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"
class="persoConnexionInscription form-control"
placeholder="Confirmation*"
minlength="6"
maxlength="20"
name="mdpConfirmationInscription"
id="mdpConfirmationInscription"
pattern="<?=REGEX_MDP?>"
oncopy="return false"
onpaste="return false"
value="<?= htmlentities($_POST['mdpConfirmationInscription'] ?? '', ENT_QUOTES, 'UTF-8')?>"
required>
<div class="input-group-text iconesConnexionInscription" >
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-eye-slash" viewBox="0 0 16 16" id="eyeIcon" style="cursor: pointer;" onclick="togglePasswordVisibility('mdpConfirmationInscription')">
<path d="M13.359 11.238C15.06 9.72 16 8 16 8s-3-5.5-8-5.5a7.028 7.028 0 0 0-2.79.588l.77.771A5.944 5.944 0 0 1 8 3.5c2.12 0 3.879 1.168 5.168 2.457A13.134 13.134 0 0 1 14.828 8c-.058.087-.122.183-.195.288-.335.48-.83 1.12-1.465 1.755-.165.165-.337.328-.517.486l.708.709z"/>
<path d="M11.297 9.176a3.5 3.5 0 0 0-4.474-4.474l.823.823a2.5 2.5 0 0 1 2.829 2.829l.822.822zm-2.943 1.299.822.822a3.5 3.5 0 0 1-4.474-4.474l.823.823a2.5 2.5 0 0 0 2.829 2.829z"/>
<path d="M3.35 5.47c-.18.16-.353.322-.518.487A13.134 13.134 0 0 0 1.172 8l.195.288c.335.48.83 1.12 1.465 1.755C4.121 11.332 5.881 12.5 8 12.5c.716 0 1.39-.133 2.02-.36l.77.772A7.029 7.029 0 0 1 8 13.5C3 13.5 0 8 0 8s.939-1.721 2.641-3.238l.708.709zm10.296 8.884-12-12 .708-.708 12 12-.708.708z"/>
</svg>
</div>
</div>

est mon JS :

Code : Tout sélectionner

function togglePasswordVisibility(inputId) {
var input = document.getElementById(inputId);
var eyeIcon = document.getElementById('eyeIcon');
if (input.type === 'password') {
input.type = 'text';
eyeIcon.classList.remove('bi-eye-slash-fill');
eyeIcon.classList.add('bi-eye-fill');
} else {
input.type = 'password';
eyeIcon.classList.remove('bi-eye-fill');
eyeIcon.classList.add('bi-eye-slash-fill');
}
}

Mon code se masque est quand je clic il devient en clair mais mon deuxième svg ne change pas.

Si quelqu'un peu m'aider je suis preneur.
Merci par avance pour votre aide.
@+ Filou

19 avr. 2023, 18:49

Sauf erreur, je ne vois pas où est défini ton deuxième svg, j'ai l'impression que tu change la class mais en conservant le contenu de l'ancien SVG.

Voici une piste pour faire ce que tu veux :
https://css-tricks.com/swapping-svg-icons/

19 avr. 2023, 18:51

Je viens de modifier mon JS la l'oeil change mais je ne parviens pas a recliqué dessus il reste sur l'oeil ouvert :

Code : Tout sélectionner

function togglePasswordVisibility(inputId) {
var input = document.getElementById(inputId);
var eyeIcon = document.getElementById('eyeIcon');
var eyeIconSVG = '<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-eye" viewBox="0 0 16 16"><path d="M16 8s-3-5.5-8-5.5S0 8 0 8s3 5.5 8 5.5S16 8 16 8zM1.173 8a13.133 13.133 0 0 1 1.66-2.043C4.12 4.668 5.88 3.5 8 3.5c2.12 0 3.879 1.168 5.168 2.457A13.133 13.133 0 0 1 14.828 8c-.058.087-.122.183-.195.288-.335.48-.83 1.12-1.465 1.755C11.879 11.332 10.119 12.5 8 12.5c-2.12 0-3.879-1.168-5.168-2.457A13.134 13.134 0 0 1 1.172 8z"/><path d="M8 5.5a2.5 2.5 0 1 0 0 5 2.5 2.5 0 0 0 0-5zM4.5 8a3.5 3.5 0 1 1 7 0 3.5 3.5 0 0 1-7 0z"/></svg>';
if (input.type === 'password') {
input.type = 'text';
eyeIcon.innerHTML = eyeIconSVG;
} else {
input.type = 'password';
if (eyeIcon.classList.contains('bi-eye-slash')) {
eyeIcon.innerHTML = eyeIconSVG.replace('bi-eye-slash', 'bi-eye');
} else {
eyeIcon.innerHTML = eyeIconSVG.replace('bi-eye', 'bi-eye-slash');
}
}
}

et 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"
class="persoConnexionInscription form-control"
placeholder="Confirmation*"
minlength="6"
maxlength="20"
name="mdpConfirmationInscription"
id="mdpConfirmationInscription"
pattern="<?=REGEX_MDP?>"
oncopy="return false"
onpaste="return false"
value="<?= htmlentities($_POST['mdpConfirmationInscription'] ?? '', ENT_QUOTES, 'UTF-8')?>"
required>
<div class="input-group-text iconesConnexionInscription" id="eyeIcon">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-eye-slash" viewBox="0 0 16 16" id="eyeIcon" style="cursor: pointer;" onclick="togglePasswordVisibility('mdpConfirmationInscription')">
<path d="M13.359 11.238C15.06 9.72 16 8 16 8s-3-5.5-8-5.5a7.028 7.028 0 0 0-2.79.588l.77.771A5.944 5.944 0 0 1 8 3.5c2.12 0 3.879 1.168 5.168 2.457A13.134 13.134 0 0 1 14.828 8c-.058.087-.122.183-.195.288-.335.48-.83 1.12-1.465 1.755-.165.165-.337.328-.517.486l.708.709z"/>
<path d="M11.297 9.176a3.5 3.5 0 0 0-4.474-4.474l.823.823a2.5 2.5 0 0 1 2.829 2.829l.822.822zm-2.943 1.299.822.822a3.5 3.5 0 0 1-4.474-4.474l.823.823a2.5 2.5 0 0 0 2.829 2.829z"/>
<path d="M3.35 5.47c-.18.16-.353.322-.518.487A13.134 13.134 0 0 0 1.172 8l.195.288c.335.48.83 1.12 1.465 1.755C4.121 11.332 5.881 12.5 8 12.5c.716 0 1.39-.133 2.02-.36l.77.772A7.029 7.029 0 0 1 8 13.5C3 13.5 0 8 0 8s.939-1.721 2.641-3.238l.708.709zm10.296 8.884-12-12 .708-.708 12 12-.708.708z"/>
</svg>
</div>
</div>

Merci pour votre aide

20 avr. 2023, 13:35

Relis mon message, suis le lien et fait pareil.

20 avr. 2023, 19:28

Bonjour,

J'ai trouvé ce que je chercher :

https://stackoverflow.com/questions/637 ... ith-jquery

@+ Filou

[RESOLU] Modifier oeil au clic

Qui est en ligne