Membuat Form Input Hanya Angka dan Desimal - Javascript & Jquery

Sobatcoding.com - Membuat form input hanya angka dan desimal menggunakan javascript dan jquery

Terkadang dalam aplikasi tertentu kita ingin membuat sebuah inputan yang hanya bisa diinput oleh angka saja ataupun format desimal. Sebenarnya sudah terdapat berbagai macam plugin jquery yang menyediakan fitur tersebut. Namun kali ini kita kan mencoba menggunakan javascript dan jquery.

Bagaimana caranya? Berikut ini kode-kodenya

Form Input Hanya Angka Saja

Buatlah contoh kode seperti berikut.

//create element input
<input type="text" id="number" class="form-control" autocomplete="off">

//jquery
$(document).on('keypress', '#number', function(e) {
    var charCode = (e.which) ? e.which : e.keyCode
    if (charCode > 31 && (charCode < 48 || charCode > 57))
        return false;

    return true;
});

Form Input Hanya Angka dan Desimal

Buatlah kode seperti berikut.

//create element input
<input type="text" id="number-decimal" class="form-control" autocomplete="off">

//jquery
$(document).on('keyup', '#number-decimal', function(e) {

    var regex = /[^\d.]|\.(?=.*\.)/g;
    var subst = "";

    var str    = $(this).val();
    var result = str.replace(regex, subst);
    $(this).val(result);

});

Number Auto Formating

Untuk yang ini kita menggunakan library <script src="../lib/jquerymask/jquery.mask.min.js" ></script>

//create element input
<input type="text" id="currency" class="form-control currency" autocomplete="off">

//init
$('.currency').mask("#.##0", {reverse: true});

Sekian tutorial kali ini. Semoga bermanfaat