Cara menggunakan show javascript

Membuat Fungsi Show - Hide Password dengan Javascript - Show password adalah fitur dimana kita dapat melihat karakter yang diketikkan pada saat mendaftar atau login pada suatu aplikasi. Tentunya hal ini akan sangat membantu ketika akan melalui proses pengetikan ulang password atau ingin memastikan password yang diketikkan sudah benar dan sesuai. Nah pada kesempatan kali ini saya akan mencoba membuat fungsi Show - Hide Password dengan Javascript, jika anda ingin membuatnya tapi tidak tahu caranya, tidak ada salahnya mengikuti langkah-langkah berikut ini.

Table of Contents Show

Bagaimana JavaScript berjalan?
Apakah JavaScript cocok untuk pemula?
Di mana JavaScript biasanya digunakan?
JavaScript bisa digunakan untuk apa?

Langkah 1. Buat Tampilkan - Sembunyikan fungsi Kata Sandi dengan Javascript

Baiklah kita mulai langkah pertama dengan membuat file index. html, dan menyusun struktur sederhana untuk membuat formulir dari input kata sandi dengan sintaks HTML berikut

Tampilkan kata sandi

Langkah 2. Buat Tampilkan - Sembunyikan fungsi Kata Sandi dengan Javascript

Selanjutnya, Anda dapat menambahkan sintaks CSS untuk mengatur jarak dan antar elemen input. Tentu Anda bisa leluasa mendesain lebih menarik untuk masukan

@import url('https. // font. googleapis. com/css?family=Roboto');
tubuh {
warna. #333;
font-family. 'Roboto', sans-serif;
}
bentuk { margin. 1em;
membentuk *. fokus { gaya garis besar. tidak ada;
form div { margin-bottom. 0. 5em;
formulir #pass {
lebar. 200px;
lapisan. 0. 3em;
berbatasan. 1px padat #ddd;
latar belakang. #fff;
}

Langkah 3. Buat Tampilkan - Sembunyikan fungsi Kata Sandi dengan Javascript

Langkah terakhir, ini adalah langkah yang paling penting untuk menjalankan fungsi show and hide password, yaitu kita akan menambahkan sintaks javascript, ketikkan perintah javascript di bawah tag body

Setelah semua sintaks di atas sudah diketik, silahkan simpan filenya, kemudian buka di browser masing-masing dan lihat hasilnya, lalu anda ketik sesuatu di form dan ingin melihat apa yang di ketik, anda tinggal mencentang bagian checkbox dan anda akan melihat isi input yang diketik

Bagaimana, cukup mudah bukan untuk membuat fungsi Show - Hide Password dengan Javascript? . )

Nah itulah tips Cara Membuat Show Password Dengan Javascript yang bisa sobat gunakan di projectnya, tentunya kita jumpa lagi di artikel selanjutnya. Terima kasih dan sampai jumpa, semoga bermanfaat

Halo semuanya, kembali lagi di sahretech. Nah pada artikel tutorial kali ini kita akan membuat sebuah fitur untuk memudahkan pengguna dalam membaca password yang dimasukkan. Yaitu menyembunyikan atau menampilkan password pada form login. Penasaran?, yuk ikuti tutorialnya dibawah ini

Buat folder baru dengan nama pass_hide_show, lalu buat file index. html di dalamnya. Isi file dengan skrip di bawah ini



<!DOCTYPE html>
    <html lang="en">
    
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
        <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"
            integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">
    </head>
    
    <body>
        <br>
        <div class="container jumbotron alert alert-success col-4 text-center">
            A Simple Login Form
        </div>
        <div class="container jumbotron col-4">
            <form>
                <div class="form-group">
                    <label for="exampleInputEmail1">Email address</label>
                    <input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp">
                </div>
                <div class="form-group">
                    <label for="exampleInputEmail1">Password</label>
                    <div class="input-group">
                        <input type="password" id="pass" class="form-control">
                        <div class="input-group-append">
    
                            <!-- kita pasang onclick untuk merubah icon buka/tutup mata setiap diklik  -->
                            <span id="mybutton" onclick="change()" class="input-group-text">
    
                                <!-- icon mata bawaan bootstrap  -->
                                <svg width="1em" height="1em" viewBox="0 0 16 16" class="bi bi-eye-fill" fill="currentColor"
                                    xmlns="http://www.w3.org/2000/svg">
                                    <path d="M10.5 8a2.5 2.5 0 1 1-5 0 2.5 2.5 0 0 1 5 0z" />
                                    <path fill-rule="evenodd"
                                        d="M0 8s3-5.5 8-5.5S16 8 16 8s-3 5.5-8 5.5S0 8 0 8zm8 3.5a3.5 3.5 0 1 0 0-7 3.5 3.5 0 0 0 0 7z" />
                                </svg>
                            </span>
                        </div>
                    </div>
                </div>
                <br>
                <button type="submit" class="btn btn-primary">Submit</button>
            </form>
        </div>
        <script>
            // membuat fungsi change
            function change() {
    
                // membuat variabel berisi tipe input dari id='pass', id='pass' adalah form input password 
                var x = document.getElementById('pass').type;
    
                //membuat if kondisi, jika tipe x adalah password maka jalankan perintah di bawahnya
                if (x == 'password') {
    
                    //ubah form input password menjadi text
                    document.getElementById('pass').type = 'text';
                    
                    //ubah icon mata terbuka menjadi tertutup
                    document.getElementById('mybutton').innerHTML = `<svg width="1em" height="1em" viewBox="0 0 16 16" class="bi bi-eye-slash-fill" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
                                                                    <path d="M10.79 12.912l-1.614-1.615a3.5 3.5 0 0 1-4.474-4.474l-2.06-2.06C.938 6.278 0 8 0 8s3 5.5 8 5.5a7.029 7.029 0 0 0 2.79-.588zM5.21 3.088A7.028 7.028 0 0 1 8 2.5c5 0 8 5.5 8 5.5s-.939 1.721-2.641 3.238l-2.062-2.062a3.5 3.5 0 0 0-4.474-4.474L5.21 3.089z"/>
                                                                    <path d="M5.525 7.646a2.5 2.5 0 0 0 2.829 2.829l-2.83-2.829zm4.95.708l-2.829-2.83a2.5 2.5 0 0 1 2.829 2.829z"/>
                                                                    <path fill-rule="evenodd" d="M13.646 14.354l-12-12 .708-.708 12 12-.708.708z"/>
                                                                    </svg>`;
                }
                else {
    
                    //ubah form input password menjadi text
                    document.getElementById('pass').type = 'password';
    
                    //ubah icon mata terbuka menjadi tertutup
                    document.getElementById('mybutton').innerHTML = `<svg width="1em" height="1em" viewBox="0 0 16 16" class="bi bi-eye-fill" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
                                                                    <path d="M10.5 8a2.5 2.5 0 1 1-5 0 2.5 2.5 0 0 1 5 0z"/>
                                                                    <path fill-rule="evenodd" d="M0 8s3-5.5 8-5.5S16 8 16 8s-3 5.5-8 5.5S0 8 0 8zm8 3.5a3.5 3.5 0 1 0 0-7 3.5 3.5 0 0 0 0 7z"/>
                                                                    </svg>`;
                }
            }
        </script>
    </body>
    
    </html>

Simpan dan jalankan file tersebut di browser, maka hasilnya akan terlihat seperti gambar di bawah ini

Hasil dari script yang dijalankan

Penjelasan

Untuk membuat fitur hide/show password, logikanya sangat sederhana, dimana kita membutuhkan event javascript onclick yang diletakkan pada ikon mata di akhir form password.

Jangan lupa beri id="pass" pada form input password, karena type akan berubah menjadi type="text" atau type="password" setiap icon mata di klik

Untuk ikon, kami tidak menggunakan font yang mengagumkan, tetapi kami menggunakan ikon svg bawaan bootstrap. Ada 2 icon mata yang kita gunakan yaitu icon mata terbuka dan icon mata tertutup



<input type="password" id="pass" class="form-control">
        <div class="input-group-append">

            <!-- kita pasang onclick untuk merubah icon buka/tutup mata setiap diklik  -->
            <span id="mybutton" onclick="change()" class="input-group-text">

                <!-- icon mata bawaan bootstrap  -->
                <svg width="1em" height="1em" viewBox="0 0 16 16" class="bi bi-eye-fill" fill="currentColor"
                    xmlns="http://www.w3.org/2000/svg">
                    <path d="M10.5 8a2.5 2.5 0 1 1-5 0 2.5 2.5 0 0 1 5 0z" />
                    <path fill-rule="evenodd"
                        d="M0 8s3-5.5 8-5.5S16 8 16 8s-3 5.5-8 5.5S0 8 0 8zm8 3.5a3.5 3.5 0 1 0 0-7 3.5 3.5 0 0 0 0 7z" />
                </svg>
            </span>
        </div>

Dan terakhir, agar event onclick di atas bisa berjalan, kita perlu menambahkan fungsi javascript seperti script di bawah ini



<script>
            // membuat fungsi change
            function change() {
    
                // membuat variabel berisi tipe input dari id='pass', id='pass' adalah form input password 
                var x = document.getElementById('pass').type;
    
                //membuat if kondisi, jika tipe x adalah password maka jalankan perintah di bawahnya
                if (x == 'password') {
    
                    //ubah form input password menjadi text
                    document.getElementById('pass').type = 'text';
                    
                    //ubah icon mata terbuka menjadi tertutup
                    document.getElementById('mybutton').innerHTML = `<svg width="1em" height="1em" viewBox="0 0 16 16" class="bi bi-eye-slash-fill" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
                                                                    <path d="M10.79 12.912l-1.614-1.615a3.5 3.5 0 0 1-4.474-4.474l-2.06-2.06C.938 6.278 0 8 0 8s3 5.5 8 5.5a7.029 7.029 0 0 0 2.79-.588zM5.21 3.088A7.028 7.028 0 0 1 8 2.5c5 0 8 5.5 8 5.5s-.939 1.721-2.641 3.238l-2.062-2.062a3.5 3.5 0 0 0-4.474-4.474L5.21 3.089z"/>
                                                                    <path d="M5.525 7.646a2.5 2.5 0 0 0 2.829 2.829l-2.83-2.829zm4.95.708l-2.829-2.83a2.5 2.5 0 0 1 2.829 2.829z"/>
                                                                    <path fill-rule="evenodd" d="M13.646 14.354l-12-12 .708-.708 12 12-.708.708z"/>
                                                                    </svg>`;
                }
                else {
    
                    //ubah form input password menjadi text
                    document.getElementById('pass').type = 'password';
    
                    //ubah icon mata terbuka menjadi tertutup
                    document.getElementById('mybutton').innerHTML = `<svg width="1em" height="1em" viewBox="0 0 16 16" class="bi bi-eye-fill" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
                                                                    <path d="M10.5 8a2.5 2.5 0 1 1-5 0 2.5 2.5 0 0 1 5 0z"/>
                                                                    <path fill-rule="evenodd" d="M0 8s3-5.5 8-5.5S16 8 16 8s-3 5.5-8 5.5S0 8 0 8zm8 3.5a3.5 3.5 0 1 0 0-7 3.5 3.5 0 0 0 0 7z"/>
                                                                    </svg>`;
                }
            }
        </script>

Dalam fungsi chnage(). kita buat variabel x yang berisi input type dari id="pass", id="pass" adalah pengenal dari form input password yang sudah kita buat diatas.

Kemudian kita lakukan pengkondisian, dimana jika x sama dengan password maka ubah jenis dari form input password menjadi text dan juga ubah icon mata terbuka menjadi icon mata tertutup

Sebaliknya, jika x tidak sama dengan kata sandi, maka ubah jenis dari formulir input teks menjadi kata sandi dan ubah juga ikon mata tertutup menjadi terbuka.

Di setiap script diatas sudah saya sertakan sedikit penjelasannya. Namun jika anda masih kesulitan untuk memahami script-script diatas, silahkan copy paste 1 script full pada script pertama yang saya berikan

Pada artikel ini kita hanya membuat tampilan saja, untuk membuat fungsi login anda bisa membaca artikel saya sebagai berikut https. // www. sahretech. com/2019/10/easy-way-to-make-multi-login-in-php. html

Sekian tutorial cara menyembunyikan/menampilkan password dengan javascript dan bootstrap. Semoga bermanfaat, jika ada pertanyaan terkait artikel diatas silahkan tinggalkan komentar dibawah. Sampai jumpa di artikel pemrograman keren lainnya. Selamat Coding. )

Bagaimana JavaScript berjalan?

Javascript cenderung sangat cepat karena dijalankan langsung di browser . Selain itu, sebagian besar browser utama mendukung kompilasi JIT (Just In Time), yang berarti tidak perlu mengompilasi kode sebelum menjalankannya.

Apakah JavaScript cocok untuk pemula?

JavaScript adalah salah satu bahasa pemrograman terpopuler saat ini. Javascript ini memiliki banyak keunggulan yang membuatnya cocok untuk pemula . Untuk itu, mempelajari JavaScript sangat disarankan jika ingin membuat website.