Halo teman-teman pada tutorial kali ini saya akan menjelaskan Cara Membuat Spasi Otomatis Untuk Input Nomor Handphone, untuk membuat Spasi Otomatis Input Nomor Handphone disini kita menggunakan sebuah tag HTML yaitu <input type=”text”> nah untuk membuat spasi otomatisnya kita menggunakan bantuan javascript, seperti yang kita ketahui bahwa input type text paling banyak digunakan, dan input type text ini juga dapat kita pakai untuk input text, number, email dan masih banyak lagi.
Fungsi dari Spasi Otomatis Untuk Input Nomor Handphone ini yaitu memudahkan kita dalam menginput nomor dalam sebuah form dengan menggunakan sebuah spasi ynag terdapat pada form tersebut, dan terkadang kita suka bingung dan menghitung jumlah nomor atau angka yang telah kita input, nah untuk memudahkan kita dalam menginput nomor hp dalam sebuah form kita menggunakan sebuah spasi otomatis yang terdapat pada form tersebut.
Oke teman-teman tanpa berlama-lama lagi kita langsung saja masuk ke study casenya tentang Cara Membuat Spasi Otomatis Untuk Input Nomor Handphone, untuk membuat spasi otomatis ini teman-teman bisa mengikuti step by step yang terdapat dibawah ini.
Langkah pertma kita akan membuat file index sebagai halaman utmannya, dan silahkan teman-teman simpan script yang terdapat dibawah ini dengan nama index.html
<!DOCTYPE html> <html > <head> <meta charset="UTF-8"> <title>Cara Membuat Spasi Otomatis Untuk Input Nomor Handphone </title> <link rel="stylesheet" href="style.css"> </head> <body> <form action=""> <label for="">Silahkan Masukan Nomor</label> <input id="cc" type="text" placeholder="1234 5678 9010"/> </form> <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js'></script> <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery.inputmask/3.3.4/jquery.inputmask.bundle.min.js'></script> <script src="index.js"></script> </body> </html>
Berikutnya kita akan membuat style nya untuk mengatur tampilan dari form yang kita buat, dan silahkan teman-teman simpan script yang terdapat dibawah ini dengan nama style.css
body{font-family: arial}
input[type="text"] {
border: 0;
border-bottom: 2px solid #bbb;
color: #bbb;
padding: 8px 0;
width: 100%;
max-width: 15em;
font-size: 20px;
text-align: center;
}
input[type="text"]:focus {
color: #3719e9;
border-color: #3377d6;
outline: 0;
}
Selanjutnya yang terakhir kita akan membuat file untuk java script nya, teman-teman bisa simpan script yang terdapat dibawah ini dengan nama index.js
$('#cc').inputmask("9999 9999 9999")
Pada file java script diatas terdapat script “$(‘#cc’).inputmask(“9999 9999 9999”)” teman-teman bisa menambahkan jumlah karakter angka sesuai yang teman-teman inginkan, atau teman-teman bisa menggunakan tanda “ – “ sebagai pembatasnya.
Untuk menjalankan script diatas silahkan teman-teman save semua filenya dan silahkan buka pada browsernya maka akan terlihat hasilnya seperti dibawah ini.
Bagaimana teman-teman cukup mudah bukan Cara Membuat Spasi Otomatis Untuk Input Nomor Handphone-nya, sekian dulu tutorial saya kali ini tentang Cara Membuat Spasi Otomatis Untuk Input Nomor Handphone.
Semoga bermafaat
Terimakasih.