Menonaktifkan Spasi Pada Inputan Dengan Jquery

Pada goresan pena kali ini aku ingin membahas seputar jquery, dimana topik inti dari goresan pena ini ialah wacana bagaimana cara menonaktifkan spasi pada inputan dengan memakai jquery.

GAMBARAN

Untuk menciptakan ini cukuplah sederhana, dimana nanti kita akan memakai sebuah listener yang dipadukan dengan fungsi replace. Kaprikornus ketika user mengetik, kemudian pada ketikannya itu terdapat karakter spasi maka akan kita remove dengan fungsi replace.

KODING

Untuk versi jquery yang aku gunakan ialah versi 2.2.4, kau sanggup mendapatkannya disini : https://cdnjs.com/libraries/jquery/2.2.4, jangan lupa diload terlebih dahulu sebelum menulis isyarat selanjutnya :

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

Kemudian disini aku punya sebuah inputan sederhana sebagai berikut :

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

Lalu diikuti dengan sintak jquery menyerupai 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 ketika ada perubahan maka fungsi itu akan secara otomatis berjalan, kemudian ketika inputan yang dimasukan mengandung spasi maka fungsi itu akan otomatis menghapusnya. Disana aku juga menambahkan fungsi keyup dimana ketika inputan dimasukan maka semua karakter akan berkembang menjadi abjad kecil, kalau kau ingin merubahnya menjadi hurup besar caranya kau cukup ubah bab "toLowerCase()" menjadi "toUpperCase()".

Agar tampilah inputan tidak terlihat polos, kita sanggup tambahkan sedikit rias dengan CSS, kurang lebih menyerupai ini, bab ini bersifat optional, kau 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 goresan pena ini aku cukupkan hingga disini, biar bermanfaat.
Tschuss...


Sumber http://www.kang-cahya.com

Share this post

Berlangganan update artikel terbaru via email: