Afisarea textului “password” in inputul de logare
| May 21st, 2008
Dupa cum stiti, formularul pentru logarea pe un site contine inputurile username si password. Mai mult, multi dintre programatori pun cuvantul “username” in interiorul campului username si “********” in campul password ca sa salveze din spatiul ocupat daca ar scrie text in dreptul campurilor. Acum va voi arata cum puteti foarte usor sa scrieti in inputul password cuvantul “password” in loc sa apara “********”.
Hai sa vedem cum facem sa afisam o casuta cu 2 inputuri in Html.
<div id="div1"> <input name="pass_temp" type="text" value="password" size="20" maxlength="20" onfocus="changeBox()" /> </div> <div id="div2" style="display:none"> <input name="password" id="password" type="password" value="" size="20" maxlength="20" onBlur="restoreBox()" /> </div>
Dupa cum vezi, am pus doua inputuri in interiorul a doua div-uri separate.
Unul temporar pentru a arata cuvantul “password”. Si celalalt este realul camp password care o sa contina valoarea reala a parolei.
Cand focusul se muta pe campul vizibil este apelata functia “changeBox()” si cand focusul este schimbat de pe campul real “password”, o sa fie apelata functia “restoreBox()”.
Si acum sa vedem codul javascript.
<script language="javascript">
function changeBox()
{
document.getElementById('div1').style.display='none';
document.getElementById('div2').style.display='';
document.getElementById('password').focus();
}
function restoreBox()
{
if(document.getElementById('password').value=='')
{
document.getElementById('div1').style.display='';
document.getElementById('div2').style.display='none';
}
}
</script>
Dupa cum vezi functia “changeBox()”, ascunde primul div, il face vizibil pe cel de-al doilea div si in final muta focusul pe campul real de tip password din div-ul al doilea.
In functia restoreBox(), daca valoarea campului “password” este valoarea vida atunci se revine la afisarea initiala.
.
