Bu yazımda input'a girilen şifreyi, javascript ile nasıl göreceğimizi anlatacağım.
Javascript kullanacağımız için referans olarak jqery olmalıdır, ya dosyanın tamamını indirin yada projenizde yer kaplamasını istemiyorsanız cdn kodunu Jquery'nin kendi sitesinden aldığınız scripti sitenize eklemeniz yeterli olacaktır
Sayfanızda kullanıcıların şifre girmesi için input koyduğunuzda kod tarafında mecburen type="password" verdiğimizden, girilen değer **** olarak görülür. Bu nedenle de kullanıcı girdiği şifreyi görememektedir.
Inputun içine sona koyacağımız icon'a ( ben göz iconu koydum) bastığımızda şifreyi görmemiz için öncelikle şifre girilen input a id değeri vermemiz gerekiyor.
Tabi burada alta birtane checkbox da koyabilsiniz. Sizin tercihiniz nasılsa o şekilde yapabilirsiniz.
Inputun html kodları aşağıdaki gibidir.
<div>
<label for="password" class="fa fa-key"> Şifre</label>
<input type="password" asp-for="Password" id="password">
<i class="fa fa-eye" onclick="togglePassword()"></i>
</div>
Kullanıcı icon'a bastığında şifrenin görülmesi için sayfanın altında oluşturduğumuz script bloğunun içine alttaki kodu yazmamız yeterlidir.
Dikkat etmemiz gereken yer ise oluşturduğumuz javascript kodundaki function adını i tag'indeki onclick event değerine vermemiz gerekiyor.
<script>
function togglePassword() {
var element = document.getElementById('password');
element.type = (element.type == 'password' ? 'text' : 'password');
}
</script>
Bu kodda getElementById sonraki değere ('password') inputun id'sini yazmamız gerekiyor.
Bu sayede kullanıcı icon'a bastığında inputun type değeri password olduğu için text'e çeviriyor ve şifre görünür hale geliyor.
Kullanıcı icona tekrar bastığında type değeri text olduğu için password'a çeviriyor ve şifrenin görülmesini engellemiş oluyor. Şifreler **** olarak görüyor.
Bu kodları kullanarak kullanıcın girdiği şifreleri görmesini sağlayabilirsiniz.