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

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 OK Choos
2 comments
Read more

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

NOTEPAD++ SOURCECOOKIFIER SETTING FOR CLIPPER LANGUAGE

Notepad++ is a very excellent programmer editor for Windows. It has plugin system which enhances it's functionality. Sourcecookifier is a plugin I like very much, it is a simple plugin which shows the outline of your source code. The screenshot below shows a pascal (delphi) source code. We can easily see the structure of the source code, and we can go to a particular method/function just by one click. Sourcecookifier recognizes several programming languages, but it does not support Clipper language. Fortunately, it is very easy to add Clipper configure. Follow this step: Click setting icon (the yellow gear icon) on the sourcecookiefier window. Click Language Settings On the setting form, type Clipper on the language box and click add. Set the file extension setting, add .prg to the extenson box On Tag Type choose any letter you like. Here I add “f” for “function” (any letter will be fine) On Appearance box, you can write the de
Post a Comment
Read more