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="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.
$(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 :)
Webinar Gratis 2024
Sabtu, 09 Maret 2024
10 Bahasa Rekomendasi Untuk Dipelajari di 2024
Python Developer, Data Science, Web Application
Minggu, 26 Mei 2024, 09.00-13.00 WIB
(4 Jam Membuat Backend di Laravel 11)