Cara Membuat Masking pada HTML dengan Javascript

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>

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:

Kemudian buat tag <script>…</script> biasanya diletakkan pada tag <body>…</body> paling bawah, kodenya adalah sebagai berikut

Hasilnya adalah sebagai berikut :

 

2. Masking Nomor Telepon

Berikut adalah cara membuat masking nomor handphone

dan pada tag<script> kita tambahkan kode berikut

Hasilnya :

 

3. Masking Kartu kredit dan uang ribuan

Berikut adalah cara masking kartu kredit

dan pada tag<script> kita tambahkan kode berikut

dan berikut adalah cara membuat format mata uang rupiah atau ribuan muncul secara otomatis

dan pada tag<script> kita tambahkan kode berikut

Hasilnya adalah sebagai berikut

 

4. Masking Persen

Berikut adalah cara membuat masking dengan persen dibelakangnya yang secara otomatis akan selalu ada

Untuk javascriptnya kita tambahkan

 

Berikut adalah cara membuat masking ip address

Untuk javascriptnya kita tambahkan

 

Berikut adalah cara membuat masking dengan kombinasi angka dan huruf

Untuk javascriptnya kita tambahkan

 

Berikut adalah cara membuat masking dengan placeholder

Untuk javascriptnya kita tambahkan

 

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 :

Sampai jumpa pada postingan saya selanjutnya..

 

2 thoughts on “Cara Membuat Masking pada HTML dengan Javascript

  1. 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.?

Leave a Reply

Your email address will not be published. Required fields are marked *

19 − four =