Skip to main content

HTML <input> tips - 01

Beberapa tips yang berguna untuk penggunaan <input> pada html.
  1. 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>
  2. 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>
  3. 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>
Pada seri berikutnya kita akan bahas bagaimana menginput angka dengan separator ribuan dan desimal dan bagaimana kita bisa menginput data tanggal dengan mengklik kalender yang akan ditampilkan.
Semoga membantu
Labels:

Comments

Post a Comment

Popular posts from this blog

Program timbangan elektronik, sebuah program Windows yang dijalankan di Linux.

Kemarin, mumpung hari libur aku setup program timbangan digital baru di kantor. Program yang lama merupakan program DOS yang aku tulis dengan menggunakan Clipper, program ini berjalan dengan baik di linux dengan bantuan dosemu. Program baru merupakan program Windows. Salah satu improvement dalam program ini adalah support untuk beberapa jenis indikator. Program diinstall di linux dengan wine versi 1.1.20. Beberapa catatan dalam instalasi program ini di wine: Pencetakan slip bukti timbangan dan laporan-2 menggunakan printer Dot Matrix. Apabila pencetakan dilakukan lewat printer driver, pencetakan dengan printer dot matrix akan menjadi sangat lambat plus hasil buruk plus boros pita... :) Oleh karena itu, program ini melakukan pencetakan langsung melalui printer port lpt1. Di windows, hal ini tidak menjadi suatu permasalahan, di linux dengan wine, maka lpt1 akan dimap ke /dev/lp0. Masalahnya, owner dari device ini adalah root dan group lp. Secara default user-user di Ubuntu (..nggak tahu...
13 comments
Read more

Install Sketchup 2017 64 bits on Linux Ubuntu 16.04 64 bits

Install Sketchup 2017 64 bits on Linux Ubuntu 16.04 64 bits: 1.Enable 32 bit architecture: $sudo dpkg --add-architecture i386  2. Set wine PPA $sudo add-apt-repository ppa:wine/wine-builds Update repository $sudo apt-get update 3. Install wine newest staging branch version $sudo apt-get install --install-recommends winehq-staging 4. Ensure we get a 64bits wine, edit file ~/.profile and locate for text: export WINEARCH= If the value is win64 you are good, if the value is win32 change it to win64. Save the file. Ensure the environment variable also set to win64 by typing command: $export WINEARCH=win64 5. Download winetricks: $wget https://raw.githubusercontent.com/Winetricks/winetricks/master/src/winetricks    Don't forget to set the attribute so it is executable $chmod +x winetricks 6. Run winetricks $./winetricks Inside winetricks: Choose Select the default wineprefix, click OK Choose Install a Windows DLL or component, click O...
2 comments
Read more

Menjalankan e-spt di linux.

Dirjen pajak belakangan ini mensosialisasikan e-spt yaitu program aplikasi komputer yang dipergunakan untuk pelaporan pajak (spt). Namun salah satu kendala besar bagi perusahaan-perusahaan menggunakan linux adalah bahwa program-program e-spt ini didesign hanya untuk komputer-komputer dengan O/S windows. Apakah kita harus mengorbankan sebuah komputer khusus plus o/s Windows hanya khusus untuk aplikasi e-spt ini? Untungnya, jawabannya adalah tidak, Wine (http://www.winehq.org) adalah sahabat anda. Bagaimana langkah-langkahnya? Install wine. Install komponen-komponen windows dengan bantuan winetricks Download dan install program e-spt Set format tanggal Wine sesuai dengan format tanggal Indonesia Detail langkah-langkah di atas adalah sbb: Install wine. Secara garis besar ada 2 cara untuk menginstall Wine: Install package binary Install dari source Cara paling mudah dan cepat adalah dengan menginstall package binary. Namun, metode ini mempunyai beberapa kelemahan: Package yang terinstall s...
16 comments
Read more