JS Cookbook - Password Visibility Toggler

Makale İçerik Listesi

  1. Öncelikle HTML tarafından bu şekilde bir syntax ile form alanımızı oluşturuyoruz.  
    <div class="form-label-group">
    <input type="password" 
           id="password" 
           name="password"
           autocapitalize="none"
           class="form-control"
           value="{{ old('password') }}"
           required>
    <label for="password">Şifren</label>
    <span id="password-toggler" data-ishidden="true">
        <span id="password-hidden-label">Göster</span>
        <span id="password-visible-label" class="d-none">Gizle</span>
    </span>
</div>
  2. Şimdi password-toggler'ı form alanının sağ tarafında sabit hale getirmek için CSS'imizi ekleyelim  
    #password-toggler {
    cursor:pointer;
    color: gray;
    font-weight: 800;
    font-size:0.8rem;
    position:absolute;
    top:0; right:0;
    line-height: 50px;
    padding: 0 15px;
}
#password-toggler:hover {
    color: blue;
}
  3. Son olarak ta sağ tarafa basıldığı takdirde göster/gizle butonunun çalışmasını hallediyoruz.  
    document.getElementById('password-toggler').addEventListener('click', function() {
    let el = this;
    let isHidden = el.dataset.ishidden;

    if(isHidden == 'true') {
        // make it visible
        document.querySelector('[name=password]').setAttribute('type', 'text');
        el.dataset.ishidden = false;

        document.getElementById('password-hidden-label').className = 'd-none';
        document.getElementById('password-visible-label').className = 'd-block';
    } else {
        // make it hidden
        document.querySelector('[name=password]').setAttribute('type', 'password');
        el.dataset.ishidden = true;

        document.getElementById('password-hidden-label').className = 'd-block';
        document.getElementById('password-visible-label').className = 'd-none';
    }
});