Fără prea multe explicaţii, codul „vorbeşte” de la sine.
CSS
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 |
@import url("https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"); .parola { border:1px solid gray; overflow:auto; width:285px; } #pswd_img { border:0px solid red; width:30px; float:left; } #pswd_txt { float:left; width:250px; border:0px solid green; } input[type="password"],input[type="text"] { height:24px; background:white; border:none; width:280px; } input[type="password"]:focus,input[type="text"]:focus {background:yellow;} .pswd_ascns:after { font-family: FontAwesome; content: "\f06e"; display: inline-block; font-size:24px; color:blue; } .pswd_arata:after { font-family: FontAwesome; content: "\f070"; display: inline-block; color:red; } |
JavaScript (de dorit de inclus în partea de jos, înainte de finalul tag-ului BODY)
|
1 2 3 4 5 6 7 8 9 10 11 12 |
(function fc_pswd() { var pElement = document.getElementById("pswd_img"); var x = document.getElementById("pswd_in"); pElement.addEventListener('click',function(){ pElement.classList.toggle('pswd_arata'); if (x.type === "password") { x.type = "text"; } else { x.type = "password"; } }); } ()); |
HTML
|
1 2 3 4 5 6 |
<div class="parola"> <div id="pswd_txt"> <input type="password" value="IntroduParola" id="pswd_in"> </div> <div id="pswd_img" class="pswd_ascns"></div> </div> |
