Widget HTML #1

Beranda / HTML / JavaScript

Cara Mudah Membuat Input Nomor Handphone yang Auto-Format di Website dengan JavaScript

Posting Komentar

Halo, teman-teman! Apa kabar? Pada artikel kali ini, kita bakal belajar bareng-bareng bagaimana caranya membuat input nomor handphone di website yang bisa otomatis memformat angka secara langsung. Keren kan? Iya dong, masa nggak! Tapi tenang, kita akan pakai JavaScript yang mudah dipahami, jadi nggak perlu pusing-pusing sampai ngopi tiga gelas dulu (tapi kalau mau kopi sih, silakan hehe).

Buat kalian yang suka bikin aplikasi atau website, mungkin pernah mengalami kebingungan gimana caranya supaya input nomor handphone di form bisa otomatis diformat sesuai standar Indonesia (yang diawali dengan "08"). Bahkan, format nomor internasional seperti "62" atau "+62" juga bakal kita handle. Di sini kita akan belajar cara membuat fitur tersebut sambil bercanda ria. Siap? Yuk, kita mulai!

Apa yang Akan Kita Buat?

Sederhananya, kita bakal bikin sebuah form yang punya satu input untuk nomor handphone. Ketika kalian memasukkan nomor di input tersebut, JavaScript akan otomatis memformatnya. Kalau nomor dimulai dengan angka 8, maka langsung diubah jadi "08". Kalau diawali dengan "62" atau "+62", akan otomatis diubah jadi "08" juga. Dan yang nggak kalah penting, kita juga bakal menghapus semua karakter yang bukan angka, misalnya spasi atau tanda minus.

Persiapan HTML dan Bootstrap

Pertama-tama, kita butuh HTML untuk membuat tampilan form, dan supaya tampilannya kece badai, kita pakai sedikit bantuan dari Bootstrap. Nih kodenya, teman-teman:


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Live Phone Number Formatter</title>
    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
    <style>
        body {
            margin-top: 50px;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="row justify-content-center">
            <div class="col-md-6">
                <h3 class="text-center">Validasi & Format Nomor Handphone</h3>
                <form>
                    <div class="mb-3">
                        <label for="phoneNumber" class="form-label">Nomor Handphone</label>
                        <input type="text" class="form-control" id="phoneNumber" placeholder="Masukkan nomor handphone">
                    </div>
                </form>
            </div>
        </div>
    </div>
</body>
</html>

Nah, di sini kita punya form yang sangat minimalis (karena yang simpel itu seringkali lebih baik, bukan? Sama kayak nge-code!). Ada input dengan label "Nomor Handphone", yang bakal kita hubungkan dengan JavaScript nanti. Oh ya, kita juga pakai sedikit styling dari Bootstrap biar tampilannya lebih rapi, jadi nggak berantakan kayak isi folder "Download" kalian yang pasti udah penuh banget tuh.

Aksi JavaScript Dimulai

Sekarang, kita masuk ke bagian serunya, yaitu kode JavaScript yang bikin input nomor kita auto-format! Tenang, kita bakal jelasin satu-satu biar paham sampai akar-akarnya.


<script>
    function formatPhoneNumberLive(input) {
        // Hapus semua karakter yang bukan angka
        let cleaned = input.replace(/[^\d]/g, '');

        // Ganti awalan 62 atau +62 dengan 08
        if (cleaned.startsWith('62')) {
            cleaned = '08' + cleaned.slice(2);
        } else if (cleaned.startsWith('8')) {
            cleaned = '08' + cleaned.slice(1);
        }

        // Pastikan panjang minimal nomor telepon adalah 10 karakter setelah diformat
        return cleaned;
    }

    // Tangkap elemen input
    const phoneNumberInput = document.getElementById('phoneNumber');

    // Tambahkan event listener untuk event input agar berfungsi secara live
    phoneNumberInput.addEventListener('input', function() {
        let formattedPhoneNumber = formatPhoneNumberLive(phoneNumberInput.value);
        phoneNumberInput.value = formattedPhoneNumber;
    });
</script>

Penjelasan:

  1. Fungsi `formatPhoneNumberLive(input)`: Di sini kita memulai dengan membersihkan semua karakter selain angka (pakai regex biar keren, tapi simpel kok). Jadi kalau ada spasi, tanda minus, atau simbol lainnya, bye-bye deh!
  2. Awalan 62 atau +62: Kalau nomor dimulai dengan "62" atau "+62", kita otomatis ubah jadi "08". Logikanya, kita potong bagian awalan "62" pakai `slice(2)` dan tambahin "08" di depannya.
  3. Awalan 8: Kalau nomor hanya dimulai dengan angka "8", langsung kita tambahkan "08" di depan, jadi nomor kalian tampil dengan standar Indonesia.
  4. Live Update: Supaya perubahan langsung terlihat saat teman-teman mengetik, kita tambahkan event listener ke input dengan tipe event `input`. Jadi setiap kali ada perubahan di input, fungsi ini bakal otomatis menjalankan formating-nya, dan hasilnya langsung tampil di input juga.

Wuih, Keren Banget Kan?

Seru kan, teman-teman? Dengan sedikit HTML, Bootstrap, dan JavaScript, kita bisa membuat input nomor handphone yang otomatis terformat sesuai aturan. Nggak ada lagi tuh masalah format nomor yang aneh-aneh. Plus, ini juga bisa bikin aplikasi atau website kalian terlihat lebih profesional dan rapi.

Kesimpulan

Jadi, apa yang kita pelajari hari ini, teman-teman? Dengan hanya beberapa baris kode, kita bisa membuat fitur canggih yang mempermudah user saat mengisi form. Kita sudah belajar cara membersihkan input dari karakter yang nggak diinginkan, menambahkan awalan "08" untuk nomor handphone Indonesia, dan melakukan perubahan secara live saat user mengetik.

Itu dia tutorial pembuatan form input nomor handphone yang keren ini. Semoga bermanfaat buat teman-teman yang lagi bikin aplikasi atau website. Sampai jumpa di artikel selanjutnya ya, dan jangan lupa, tetap semangat belajar sambil sesekali ngopi!

Posting Komentar untuk "Cara Mudah Membuat Input Nomor Handphone yang Auto-Format di Website dengan JavaScript"

Posting Komentar