Translate Blog ATweb in Arabic       Translate Blog ATweb in Chinese       Translate Blog ATweb in English       Translate Blog ATweb in French       Translate Blog ATweb in German       Translate Blog ATweb in Italian       Translate Blog ATweb in Japanese       Translate Blog ATweb in Korean       Translate Blog ATweb in Portuguese       Blog ATweb in Romanian       Translate Blog ATweb in Russian       Translate Blog ATweb in Spanish
blog.atweb.ro » Java | PHP | Script | Tips & Tricks » Afisarea textului “password” in inputul de logare
Trimite articolul prin email. Tipareste acest articol.

sslDupa 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.

.




Evalueaza acest articol:
NesatisfacatorInsuficientNeutruAcceptabilExcelent
Loading ... Loading ...

Comments are closed.