Menonaktifkan spasi pada inputan dengan jquery

Pada tulisan kali ini saya ingin membahas seputar jquery, dimana topik inti dari tulisan ini adalah tentang bagaimana cara menonaktifkan spasi pada inputan dengan menggunakan jquery.

GAMBARAN

Untuk membuat ini cukuplah sederhana, dimana nanti kita akan menggunakan sebuah listener yang dipadukan dengan fungsi replace. Jadi saat user mengetik, kemudian pada ketikannya itu terdapat karakter spasi maka akan kita remove dengan fungsi replace.

KODING

Untuk versi jquery yang saya gunakan adalah versi 2.2.4, kamu bisa mendapatkannya disini : https://cdnjs.com/libraries/jquery/2.2.4, jangan lupa diload terlebih dahulu sebelum menulis kode selanjutnya :

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>

Kemudian disini saya punya sebuah inputan sederhana sebagai berikut :

<input id="form-input" placeholder="Type some text here...">

Lalu diikuti dengan sintak jquery seperti ini :

$("#form-input").on({
 keydown: function(e) {
   if (e.which === 32)
     return false;
  },
  keyup: function(){
   this.value = this.value.toLowerCase();
  },
  change: function() {
    this.value = this.value.replace(/\s/g, "");
    
  }
});

Sintak utamanya ada pada fungsi keydown dan change, dimana saat ada perubahan maka fungsi itu akan secara otomatis berjalan, lalu saat inputan yang dimasukan mengandung spasi maka fungsi itu akan otomatis menghapusnya. Disana saya juga menambahkan fungsi keyup dimana saat inputan dimasukan maka semua karakter akan berubah menjadi huruf kecil, jika kamu ingin merubahnya menjadi hurup besar caranya kamu cukup ubah bagian "toLowerCase()" menjadi "toUpperCase()".

Agar tampilah inputan tidak terlihat polos, kita bisa tambahkan sedikit rias dengan CSS, kurang lebih seperti ini, bagian ini bersifat optional, kamu tidak tambahkan pun tidak jadi masalah.

input {
  border: 3px solid #9E9E9E;
  border-radius: 5px;
  height: 45px;
  width: 450px;
  font-size: 24px;
  color: #212121;
  margin: 25px 0px 0px 25px;
  padding: 15px;
}

 

Diatas merupakan gambar inputan yang sudah kita beri CSS.

DEMO & FULL KODE




PENUTUP

Mungkin tulisan ini saya cukupkan sampai disini, semoga bermanfaat.
Tschuss...