Cara Membuat Masking pada HTML dengan Javascript – Hai ketemu lagi dengan saya dewan komputer dan pada kesempatan kali ini saya akan memposting tentang cara membuat masking pada form inputan HTML. Masking ada banyak macamnya seperti masting nomor handphone, masking kartu kredit, masking tanggal, masking harga dan masih banyak lagi. Dengan masking ini kita bisa membuat aturan sendiri tentang apa saja yang boleh diinputkan pada input text. Seperti hanya number/angka saja atau sebaliknya, dan misalkan ktp hanya bisa number dan 16 digit atau yang biasa digunakan adalah untuk mata uang. Dengan masking kita bisa membuat secara otomatis akan muncul titik jika sudah mencapai angka ribuan dan kelipatannya.
Berikut adalah cara membuat masking :
Pertama tentunya kita tambahkan dulu librarinya, karena saya akan mencontohkan pada file index.php maka sobat bisa membuat sesuai kebutuhan. Masukkan librari dibawah antara tag <head>…</head>
|
1 2 3 |
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> https://cdnjs.cloudflare.com/ajax/libs/jquery.mask/1.14.15/jquery.mask.min.js |
Karena hanya untuk keperluan demo jadi saya mencontohkan menggunakan librari online namun untuk keperluan development sobat perlu mendownloadnya terlebih dahulu atau sobat bisa mendownload bersama project ini pada postingan paling bawah. Untuk librari bootstrap hanya untuk mempercantik tampilan saja, jika sobat sudah menggunakannya maka tidak perlu dicopy, namun jika ingin menggunakan jquery.mask.min.js wajib ada juga jquery.min.js.
Macam-macam masking
1. Masking waktu
Pada contoh dibawah saya gabungkan sekalian yaitu ada cara membuat masking tanggal, jam/time dan tanggal+jam. Contoh penggunaannya adalah sebagai berikut:
|
1 2 3 4 5 6 7 8 |
<label>Date</label> <input type="text" name="date" class="form-control date" placeholder="00/00/0000"> <label>Time</label> <input type="text" name="time" class="form-control time" placeholder="00:00:00"> <label>Date Time</label> <input type="text" name="date_time" class="form-control date_time" placeholder="00/00/0000 00:00:00"> |
Kemudian buat tag <script>…</script> biasanya diletakkan pada tag <body>…</body> paling bawah, kodenya adalah sebagai berikut
|
1 2 3 4 5 6 7 |
<script type="text/javascript"> $(document).ready(function(){ $('.date').mask('00/00/0000'); $('.time').mask('00:00:00'); $('.date_time').mask('00/00/0000 00:00:00'); }); </script> |
Hasilnya adalah sebagai berikut :
2. Masking Nomor Telepon
Berikut adalah cara membuat masking nomor handphone
|
1 2 3 4 5 6 7 8 |
<label>Phone</label> <input type="text" name="phone" class="form-control phone" placeholder="0000-0000"> <label>Phone Us</label> <input type="text" name="phone_us" class="form-control phone_us" placeholder="(000) 000-0000"> <label>Phone With DDD</label> <input type="text" name="phone_with_ddd" class="form-control phone_with_ddd" placeholder="(00) 0000-0000"> |
dan pada tag<script> kita tambahkan kode berikut
|
1 2 3 |
$('.phone').mask('0000-0000'); $('.phone_with_ddd').mask('(00) 0000-0000'); $('.phone_us').mask('(000) 000-0000'); |
Hasilnya :
3. Masking Kartu kredit dan uang ribuan
Berikut adalah cara masking kartu kredit
|
1 2 3 4 5 |
<label>Credit Card</label> <input type="text" name="credit_card" class="form-control credit_card" placeholder="0000 0000 0000 0000"> <label>Valid</label> <input type="text" name="valid" class="form-control valid" placeholder="00/00"> |
dan pada tag<script> kita tambahkan kode berikut
|
1 2 |
$('.credit_card').mask('0000 0000 0000 0000'); $('.valid').mask('00/00'); |
dan berikut adalah cara membuat format mata uang rupiah atau ribuan muncul secara otomatis
|
1 2 3 4 5 |
<label>Uang</label> <input type="text" name="money" class="form-control money" placeholder="000.000.000.000.000,00"> <label>Uang Tak Terbatas</label> <input type="text" name="money2" class="form-control money2" placeholder="#.##0,00"> |
dan pada tag<script> kita tambahkan kode berikut
|
1 2 |
$('.money').mask('000.000.000.000.000,00', {reverse: true}); $('.money2').mask("#.##0,00", {reverse: true}); |
Hasilnya adalah sebagai berikut
4. Masking Persen
Berikut adalah cara membuat masking dengan persen dibelakangnya yang secara otomatis akan selalu ada
|
1 2 |
<label>Persen</label> <input type="text" name="percent" class="form-control percent" placeholder="##0,00%"> |
Untuk javascriptnya kita tambahkan
|
1 |
$('.percent').mask('##0,00%', {reverse: true}); |
Berikut adalah cara membuat masking ip address
|
1 2 |
<label>IP Address</label> <input type="text" name="ip_address" class="form-control ip_address2" placeholder="099.099.099.099"> |
Untuk javascriptnya kita tambahkan
|
1 |
$('.ip_address').mask('099.099.099.099'); |
Berikut adalah cara membuat masking dengan kombinasi angka dan huruf
|
1 2 |
<label>Mixed Angka dan Huruf</label> <input type="text" name="mixed" class="form-control mixed" placeholder="AAA 000-S0S"> |
Untuk javascriptnya kita tambahkan
|
1 |
$('.mixed').mask('AAA 000-S0S'); |
Berikut adalah cara membuat masking dengan placeholder
|
1 2 |
<label>Placeholder</label> <input type="text" name="placeholder" class="form-control placeholder" placeholder="00/00/0000"> |
Untuk javascriptnya kita tambahkan
|
1 |
$('.placeholder').mask("00/00/0000", {placeholder: "__/__/____"}); |
Untuk hasilnya dari keempat contoh diatas adalah sebagai berikut
Sebenarnya masih banyak masking yang bisa digunakan. Diatas hanya sebagian contoh saja, sobat bisa merubahnya sesuai kebutuhan sehingga masking ini tidak terbatas intinya kita membatasi/membuat aturan sendiri pada input text sesuai yang kita butuhkan sehingga pengguna tidak bisa mengetikkan asal dan mengakibatkan formatnya jadi berbeda-beda. Sekian postingan saya tentang Cara Membuat Masking pada HTML dengan Javascript. Jika ada kesalahan saya mohon maaf dan jika ada pertanyaan bisa sobat tinggalkan pada kolom komentar dibawah.
Jika sobat ingin mendownload tutorial diatas maka sobat bisa klik link dibawah ini :
Copy the snippet into any text editor, extract and put the hosted_button_id value (XXXXXXXXXX) into the Above Field.
ini adalah peruntah dari salah satu plugin wordpress. bagaimana cara mengikuti perintah tersebut.?
Untuk masking input type number, gimana caranya?