Cara Membuat Fitur Inputan Only Number

Cara Membuat Fitur Inputan Only Number - Pernahkah kalian ketika disuguhkan form inputan pada suatu website dan menemukan ada inputan hanya bisa isikan dengan angka (number) saja ? pasti pernah yah.. Memang hal seperti itu sudah biasa dilakukan oleh para developer, tujuannya adalah agar user bisa terbantu dengan adanya hal - hal seperti itu. Lalu pertanyaan nya dengan apa fitur seperti inputan hanya bisa disiikan dengan angka saja ? sekaranga banyak sekali bahasa program yang bisa kita gunakan untuk membuat fitur seperti itu, misalnya saja yang paling sederhana dengan Javscript. Nah, buat kalian yang mungkin pensaran ingin membuat fitur only number, kalian bisa ikuti tutorial berikut yakni Cara Membuat Fitur Inputan Only Number.

Langkah 1 : Cara Membuat Fitur Inputan Only Number

Baik, langsung saja kita mulai untuk membuat fitur ini kita hanya perlu form input yang bisa kalian buat dengan sintak HTML, namun pada kasus ini saya menggunakan Bootstrap untuk inputan nya. Silahkan kalian bisa ketikan sintak nya seperti berikut ini.

<div class="container mt-3">
    <div class="form-group" id="only-number">
        <input type="text" class="form-control" id="number" placeholder="Input only number">
    </div>
</div>

Langkah 2 : Cara Membuat Fitur Inputan Only Number

Langkah selanjutnya, setelah membuat satu buah form inputan kita akan membuat agar kolom inputan hanya bisa disiikan dengan format angka saja, untuk membuat fitur ini kita akan buat dengan Regex pada javascript seperti berikut ini.

<script>
    $(function() {
      $('#only-number').on('keydown', '#number', function(e){
          -1!==$
          .inArray(e.keyCode,[46,8,9,27,13,110,190]) || /65|67|86|88/
          .test(e.keyCode) && (!0 === e.ctrlKey || !0 === e.metaKey)
          || 35 <= e.keyCode && 40 >= e.keyCode || (e.shiftKey|| 48 > e.keyCode || 57 < e.keyCode)
          && (96 > e.keyCode || 105 < e.keyCode) && e.preventDefault()
      });
    })
</script>

Setelah kalian ketikan semua sintak diatas, selanjutnya bisa kalian simpan filenya kemudian silahkan buka pada browser masing - masing untuk mencoba apakah fitur nya bisa berfungsi atau tidak, jika tidak berfungsi silahkan cek kembali sintak HTML dan juga javsacript untuk memastikan semua sintak diketikan dengan benar.

Baiklah cukup sekian tutorial kali ini mengenai bagaimana Cara Membuat Fitur Inputan Only Number, semoga tutorial ini bisa bermanfaat dan selamat mencoba :)

26 Juli 2018

Webinar Gratis 2024


Selanjutnya Pada Bulan Maret 2024

Sabtu, 09 Maret 2024


10 Bahasa Rekomendasi Untuk Dipelajari di 2024

Python Developer, Data Science, Web Application

Kursus Python Django Web Application 2024 di DUMET School Seminar Java April 2024 di DUMET School
chat