Článek v rubrikách:

»Javascript
»HTML

Hvězdičky ve formulářových polích

Jakob Nielsen se zabývá myšlenkou o zbytečnosti skrývaní hesla při jeho psaní. http://www.useit.com/alertbox/passwords.html. Osobně se mě líbí navrhnuté řešení v podobě zaškrtávacího tlačítka, které by zobrazilo nebo skrylo heslo.


Jakob Nielsen se zabývá myšlenkou o zbytečnosti skrývaní hesla při jeho psaní. http://www.useit.com/alertbox/passwords.html. Osobně se mě líbí navrhnuté řešení v podobě zaškrtávacího tlačítka, které by zobrazilo nebo skrylo heslo. Tohle řešení se už hodně dlouho používá v gnome, ale nikdy by mě nenapadlo že by se to dalo použít i na webu.

Přitom vytvoření takového přepínače je triviální.

  1. $(document).ready(function() {
  2. $("#show").change(function(e){
  3. (($("#pass")[0].type == 'password') ? $("#pass")[0].type = 'text' : $("#pass")[0].type = 'password'
  4. })
  5. })
  1. <input type="password" id="pass" name="pass">
  2. <input type="checkbox" id="show" name="show">

Pro správnou funkčnost ukázky je potřeba knihovna jQuery http://jquery.com/.

Další řešení uvedené na že se formulářové pole bude chovat jako na mobilu, napíše se znak, který se po chvíli změní na hvězdičku také není špatné. Ale neuvědomil sem si že jeho řešení je poněkud složitější. Problém byl jak uchovávat heslo. Vydal jsem se cestou že budu ukládat heslo do jiného hidden inputu.

  1. function setVal(){
  2. $("#pass2").val(repeat("*", pass.length))
  3. }
  1. function repeat(s, n){
  2. var a = [];
  3. while(a.length < n){
  4. a.push(s);
  5. }
  6. return a.join('');
  7. }
  8. $("#pass2").keyup(
  9. function(e){
  10. pass = $("#pass2").val();
  11. lastChar = pass.substring(pass.length-1,pass.length)
  12. $("#pass22").val($("#pass22").val() + lastChar)setTimeout('setVal()',800)
  13. }
  14. )
  1. <input type="text" id="pass22" name="pass22" value="">
  2. <input type="text" id="pass2" name="pass2">

Kód nebere v potaz kopírování pomocí myši a mazaní. Realizace kontroly každé stisknuté klávesy jestli se nejedná o mazaní nebo přesun a pak tuto změnu přenášet do skrytého pole je příliš složitá na to jaký výsledek nám to přináší.
Pokud máte nějaký nápad jak to udělat jednodušeji tak sem s ním.

Osobně si myslím že tento způsob vytváření password inputů nemá moc šancí se prosadit pokud to nezačne používat nějaký významný hráč (google, facebook).