Şifreyi yazarken gösteren giriş formu tasarımı

Giriş formunda  yazdığımız  şifreyi  göremediğimiz  için çoğu zaman yanlış yanlış  şifre gireriz. Ya klavye dil seçeneği yanlış seçilmiştir  yada bütün harfler  büyük yazıyordur. Bu iki seçenek  yanlış şifre girmemize  en çok neden olan seçeneklerdir. Halbuki şifremizi  yazmaya başladığımız  anda  görebilsek  ve  diğer  aşamalara geçtiğimiz şifremiz tekrar  gizlense  güzel olurdu değil mi ? Bence hiç güzel olmaz şifre dediğin sonuna  kadar şifreli olmalı :=)   Andreas Storm da sanırım şifre  bölümüne girdiği şifresini  benim gibi sürekli yanlış girenlerden. Sanırım bu yüzden böyle bir çalışma hazırlamış. Aslında  fena fikir  değil ama benim üç kağıtçı yeğenlerimin gözü sürekli şifrelerimde  olduğu için bana  faydalı  gibi  gelmiyor. 


Kullanım

• Head etiketleri arasına eklemeniz gereken bölümler.

Js dosya adresi : 

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>

 JavaScript : 

<script>
//show password
$(document).ready(function(){
    $("#pw").focus(function(){
        this.type = "text";
    }).blur(function(){
        this.type = "password";
    })   
});

//Placeholder fixed for Internet Explorer
$(function() {
	var input = document.createElement("input");
	if(('placeholder' in input)==false) { 
		$('[placeholder]').focus(function() {
			var i = $(this);
			if(i.val() == i.attr('placeholder')) {
				i.val('').removeClass('placeholder');
				if(i.hasClass('password')) {
					i.removeClass('password');
					this.type='password';
				}			
			}
		}).blur(function() {
			var i = $(this);	
			if(i.val() == '' || i.val() == i.attr('placeholder')) {
				if(this.type=='password') {
					i.addClass('password');
					this.type='text';
				}
				i.addClass('placeholder').val(i.attr('placeholder'));
			}
		}).blur().parents('form').submit(function() {
			$(this).find('[placeholder]').each(function() {
				var i = $(this);
				if(i.val() == i.attr('placeholder'))
					i.val('');
			})
		});
	}
	});
	</script>

 Css : 

body {
  background: #2f313d;
  color: #46485c;
  font-family: sans-serif;
}

h2 {
  color: #46485c;
  font-size: 15px;
  font-weight: 600;
  text-align: center;
  margin-bottom: 10px;
}

a {
  color: #46485c;
  text-decoration: none;
}

.login {
  width: 250px;
  position: absolute;
  top: 50%;
  left: 50%;
  margin: -184px 0px 0px -155px;
  background: rgba(0,0,0,0.2);
  padding: 20px 30px;
  border-radius: 5px;
  box-shadow: 0px 1px 0px rgba(0,0,0,0.3),inset 0px 1px 0px rgba(255,255,255,0.07)
}

input[type="text"], input[type="password"] {
  width: 250px;
  padding: 25px 0px;
  background: transparent;
  border: 0;
  border-bottom: 1px solid rgba(255,255,255,0.04);
  outline: none;
  color: #46485c;
  font-size: 12px;
}
input[type=checkbox] {
  display: none;
}

label {
  display: block;
  position: absolute;
  margin-right: 10px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: transparent;
  content: "";
  transition: all 0.3s ease-in-out;
  cursor: pointer;
  border: 3px solid #46485c;
}

#remember:checked ~ label[for=remember] {
  background: #b5cd60;
}

input[type="submit"] {
  background: #b5cd60;
  border: 0;
  width: 250px;
  height: 40px;
  border-radius: 3px;
  color: white;
  cursor: pointer;
  transition: background 0.3s ease-in-out;
}
input[type="submit"]:hover {
  background: #16aa56;
}

.forgot {
  margin-top: 30px;
  display: block;
  font-size: 11px;
  text-align: center;
  font-weight: bold;
}
.forgot:hover {
  margin-top: 30px;
  display: block;
  font-size: 11px;
  text-align: center;
  font-weight: bold;
  color: #6d7781;
}

.remember {
  padding: 30px 0px;
  font-size: 12px;
  text-indent: 25px;
  line-height: 15px;
}

::-webkit-input-placeholder {
  color: #46485c;
}

[placeholder]:focus::-webkit-input-placeholder {
  transition: all 0.2s linear;
  transform: translate(10px, 0);
  opacity: 0;
}

•  Body etiketleri arasına eklemeniz gereken bölüm.

Html : 

<div class='login'>
  <h2>Sign in</h2>
  <input name='username' placeholder='Username' type='text'/>
  <input id='pw' name='password' placeholder='Password' type='password'/>
  <div class='remember'>
    <input checked='' id='remember' name='remember' type='checkbox'/>
    <label for='remember'></label>Remember me
  </div>
  <input type='submit' value='Sign in'/>
  <a class='forgot' href='https://www.mintik.com/?p=13685'>Forgot your password?</a>
</div>