Beberapa tips yang berguna untuk penggunaan <input> pada html.
Semoga membantu
- Membatasi jumlah character maksimal yang boleh diinput.
Gunakan attribute maxlength. Contoh:<html> <head> </head> <body> Input ini hanya dibatasi 5 character saja <input type="text" maxlength="5"> </body> </html>
- Memaksa semua input ke huruf besar atau huruf kecil.
Untuk hal ini kita harus menggunakan CSS property text-transform. Untuk memaksa semua input ke huruf besar gunakan text-transform:uppercase, untuk ke huruf kecil gunakan text-transform:lowercase. Namun harus diperhatikan bahwa CSS hanya merubah tampilan saja, tetapi value dari text box itu sendiri tetap. Semisal kita mengketik kata 'semarang' dalam huruf kecil, dengan text-transform:uppercase yang ditampilkan adalah 'SEMARANG', tetapi value dari <input> tetap 'semarang' dalam huruf kecil. Untuk memaksa value juga berubah ke huruf besar, kita harus mengkombinasikan css dengan jquery script yang mentrap event blur. Dalam hal ini kita memerlukan jquery, jika di komputer anda belum terinstall download terlebih dahulu jquery versi terbaru di http://docs.jquery.com/Downloading_jQuery.
Nama file hasil download jQuery mengandung version number dan jenis script yang kita download (minified atau compressed). Copykan file tsb. ke web directory kita dan rename filenya menjadi jquery.js.
Contoh:<html> <head> <style type="text/css"> input.hurufbesar { text-transform:uppercase } </style> <script type="text/javascript" src="jquery.js"></script> <script type="text/javascript"> $(document).ready ( function() { $('input.hurufbesar').blur ( function() { this.value = this.value.toUpperCase(); } ) } ) function CheckValue() { alert( "Value yang diketik adalah :" + document.getElementById('inputan').value ); } </script> </head> <body> Input ini dalam huruf besar semua <input type="text" class="hurufbesar" id="inputan"> <input type="button" value="Check" onclick="javascript:CheckValue()"> </body> </html> - Membatasi hanya angka saja yang boleh diinput.
Untuk keperluan ini kita bisa menggunakan jQuery.
Selanjutnya kita buat sebuah function yang akan dijalankan pada waktu terjadi event keypress pada tag <input> yang mempunyai class angkasaja sbb:
$(document).ready ( function() { $("input.angkasaja").keypress ( function( event ) { return ( event.which >= 48 && event.which <= 57 ); } ) } )
Code snippet di atas, intinya adalah bahwa setiap terjadi event keypress (tombol ditekan) akan dilakukan pengecekan apakah keycode dari tombol yang ditekan ada di antara 48 (ascii code dari angka 0) dan 57 (ascii code dari angka 9), apabila ya event functionnya akan mereturn TRUE artinya keypress diaccept, tapi bila tidak event functionnya akan mereturn FALSE artinya inputan ditolak.
Selanjutnya, untuk semua <input> di mana kita menghendaki bahwa yang bisa diinput hanya angka saja, cukup kita berikan class angkasaja
Contoh:
<html> <head> <script type="text/javascript" src="jquery.js"></script> </head> <script type="text/javascript"> $(document).ready ( function() { $("input.angkasaja").keypress ( function( event ) { return ( event.which >= 48 && event.which <= 57 ); } ) } ) </script> <body> Hanya angka yang bisa diinput <input type="text" class="angkasaja"> </body> </html>
Semoga membantu
Comments
Post a Comment