Javascript Şifre Göster/Gizle, Son zamanlarda mobil uygulamlarda ve web’de sıkça rastladığımız şifre göster/gizle olayını basit bir şekilde html ve javascript kullanarak nasıl yapabiliriz onu bu makalede göreceğiz.

İçerik göster

Javascript Şifre Göster/Gizle Yapımı

Email ve şifre alanlarının yer aldığı basit bir html formu hazırladık ve i etiketine onclick event’ine tooglePassword adındaki fonksiyonumuzu yazıyoruz ve i etiketine her tıklamada şifre alanındaki değeri şifre türü/metin türü olarak göster gizle yapıyoruz.

HTML Kodumuz

<form class="ui large form">
    <div class="ui stacked segment">
        <div class="field">
            <div class="ui icon input">
                <input type="text" name="email" placeholder="E-mail address" /> 
            </div>
        </div>
        <div class="field">
            <div class="ui icon input">
                <input type="password" id="password" name="password" placeholder="Password" /> 
                <i class="circular eye link icon" onclick="togglePassword()"></i> 
            </div>
        </div>
        <div class="ui fluid large teal submit button">Login</div>
    </div>
</form>

</div>

</div>

<div class="ui fluid large teal submit button">Login</div>

</div>

</form>

Bu örneğimizde SemanticUI template’ini kullandık bundan dolayı üstteki kodda class’lar içerisindeki değerler SemanticUI template’inde tanımlı olan class’lardır.

tooglePassword adlı fonksiyonumuzun içeriğide altta gözüktüğü gibi her tıklamada şifre türü password ise text yada text ise password’e dönüştürülecek.

JAVASCRIPT Kodumuz

function togglePassword() {
    var element = document.getElementById('password');
    element.type = (element.type == 'password' ? 'text' : 'password');
}

function togglePassword() {

var element = document.getElementById('password');

element.type = (element.type == 'password' ? 'text' : 'password');

}

Örneğimiz basit bir örnek olduğundan makale buraya kadar 🙂 şimdi bu örneğin tüm kodlarını görelim sizde kodları alıp deneyebilirsiniz, düzeltmeler yapabilirsiniz olayı anlamak açısından. Zaten html kodlarını saymaz isek toplamda 2 satır javascript kodu ile input’un text olan türünü password ve password olan türünü ise text’e çeviriyoruz her tıklamada.

HTML Son Hali

<html>
    <head>
        <title>Toggle Password Show</title>
        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.2.6/semantic.css" />
    </head>
    <body>
        <form class="ui large form">
            <div class="ui stacked segment">
                <div class="field">
                    <div class="ui icon input">
                        <input type="text" name="email" placeholder="E-mail address" />
                    </div>
                </div>
                <div class="field">
                    <div class="ui icon input">
                        <input type="password" id="password" name="password" placeholder="Password" /> 
                        <i class="circular eye link icon" onclick="togglePassword()"></i>
                    </div>
                </div>
                <div class="ui fluid large teal submit button">Login</div>
            </div>
        </form>
        <script>
            function togglePassword() {
                var element = document.getElementById('password');
                element.type = (element.type == 'password' ? 'text' : 'password');
            }
        </script>
    </body>
</html>

<html>

<head>

<title>Toggle Password Show</title>

</head>

<body>

</div>

</div>

<div class="ui fluid large teal submit button">Login</div>

</div>

</form>

function togglePassword() {

var element = document.getElementById('password');

element.type = (element.type == 'password' ? 'text' : 'password');

}

</script>

</body>

</html>

Html ve javacript tarafında yazdığımız ve üstte sizlerle paylaştığımız kodların demosunu canlı olarak alttaki araçtan görebilirsiniz. Daha önce belirttiğim tasarım konusunda ki bir uyarıyı sizinle tekrar paylaşmak istiyorum alttaki Result sekmesinde gözüken tasarım SemanticUI’a ait bir tasarımdı. Bu tasarımı kullanmak isterseniz html kodları içeriside link etiketi ile kullandığım semantiui cdn linkinden faydalanabilirsiniz.

Demo

<br> See the Pen <a href="https://codepen.io/muratoner-the-typescripter/pen/eYddgvQ" target="_blank" rel="noopener">Javascript Password Show/Hide</a> by Murat ÖNER<br> (<a href="https://codepen.io/muratoner-the-typescripter" target="_blank" rel="noopener">@muratoner-the-typescripter</a>) on <a href="https://codepen.io" target="_blank" rel="noopener">CodePen</a>.<br>

Javascript Şifre Göster/Gizle Özeti

Javascript’de şifre göster/gizle olayını bu makalede gördük ve demo üzerinden sizlere nasıl çalıştığını canlı olarak sunduk. Umarım projelerinizde aktif olarak kullanabileceğiniz ufak bir ipucu olur sizin için. Farklı javascript örnekleri ve ipuçları için alttaki benzer makalelere bakabilir yada site kategorilerinden javascript kategorisinden diğer makalelere de gözatmanızı öneririm.

📚 Javascript Şifre Göster/Gizle Benzeri Makaleler

✍ Lütfen olumlu-olumsuz tüm görüşlerinizi bana yorum yada mail yolu ile iletmeyi ihmal etmeyin.

🔗 Sosyal medya kanallarından makaleyi paylaşarak destek olursanız çok sevinirim.

👋 Bir sonraki makalede görüşmek dileğiyle.

4.6/5 - (13 votes)

Kategoriler

Bloga e-posta ile abone ol

Javascript Şifre Göster/Gizle Yapımı