[Javascript] Hanya Angka dalam Input


Terkadang untuk mencegah user memasukan nilai yang lain selain yang dimaksud diperlukan. Tujuannya adalah untuk mencegah kesalahan input.

Berikut ini adalah salah satu trik pada javascript untuk mencegah pengguna memasukan nilai lain selain angka pada browser.

function onlyNumbers(evt) {
	// Mendapatkan key code	
	var charCode = (evt.which) ? evt.which : event.keyCode;

	// Validasi hanya tombol angka
	if (charCode > 31 && (charCode < 48 || charCode > 57))
		return false;
	return true;
}

Penjelasan:

  • var charCode = (evt.which) ? evt.which : event.keyCode;
    Berfungsi untuk mendapatkan nilai key code.
    Pada browser berbasis IE, pada saat pengguna menekan tombol, event yang diaktifkan adalah event.keyCode.
    Sedangkan pengguna non-IE, kebanyakan menggunakan event.which
  • if (charCode > 31 && (charCode 57))
    Kode tombol numerik/angka pada Javascript adalah 48-57. Selain itu, tombol lain tidak akan diterima.
    Untuk lebih lanjut mengenai Javascript Key Code masuk ke tulisan sebelumnya (Javascript Char Codes (Key Codes)).

Penggunaan

Dengam memanfaatkan script di atas, tambahkan atribut onKeyPress pada tag <input /> dengam mengaktifkan fungsi di onlyNumbers tersebut.

<input type="text" name="nomor" onKeyPress="return onlyNumbers(event);" value="0" />

Javascript Char Codes (Key Codes)


Javascript merupakan salah satu bahasa pemrograman yang populer digunakan dalam pengembangan aplikasi web. Javascript umumnya berjalan di atas browser client untuk melakukan pemrosesan “sederhana” tanpa harus meminta server yang melakukan semuanya. Salah satunya, Javascript mampu untuk mendeteksi kode tombol keyboard yang ditekan.

Mungkin Anda pernah mendengar dan memrogram dengan ASCII Code? ASCII Char Code dengan Javascript Char Code (atau lebih tepatnya Key Code) merupakan sesuatu yang berbeda. Sehingga perlu ditangani secara berbeda pula. Javascript Char Code hanya terdiri dari tombol yang ada dalam keyboard (catatan: ada beberapa yang tidak termasuk). Namun demikian tidak pada ASCII Char Code, ASCII memasukan karakter yang tidak termasuk dalam keyboard (misal tanda tanya ‘?’, tanda tanya sebenarnya adalah kombinasi [shift] dan [.]).

Berikut ini adalah daftar Javascript key code.

Key Code Key Code Key Code
Backspace 8 E 69 Numpad 8 104
Tab 9 F 70 Numpad 9 105
Enter 13 G 71 Multiply 106
Shift 16 H 72 Add 107
Ctrl 17 I 73 Subtract 109
Alt 18 J 74 Decimal Point 110
Pause/Break 19 K 75 Divide 111
Caps Lock 20 L 76 F1 112
Escape 27 M 77 F2 113
Page Up 33 N 78 F3 114
Page Down 34 O 79 F4 115
End 35 P 80 F5 116
Home 36 Q 81 F6 117
Left Arrow 37 R 82 F7 118
Up Arrow 38 S 83 F8 119
Right Arrow 39 T 84 F9 120
Down Arrow 40 U 85 F10 121
Insert 45 V 86 F11 122
Delete 46 W 87 F12 123
0 48 X 88 Num Lock 144
1 49 Y 89 Scroll Lock 145
2 50 Z 90 Semi-Colon 186
3 51 Left Window Key 91 Equal Sign 187
4 52 Right Window Key 92 Comma 188
5 53 Select Key 93 Dash 189
6 54 Numpad 0 96 Period 190
7 55 Numpad 1 97 Forward Slash 191
8 56 Numpad 2 98 Grave Accent 192
9 57 Numpad 3 99 Open Bracket 219
A 65 Numpad 4 100 Back Slash 220
B 66 Numpad 5 101 Close Braket 221
C 67 Numpad 6 102 Single Quote 222
D 68 Numpad 7 103

Catatan:

  • Beberapa browser memiliki key code yang berbeda untuk beberapa key tertentu.
  • Tombol Print Screen terkadang tidak dideteksi oleh beberapa browser. Umumnya browser yang mendeteksi tombol tersebut dengan kode 44.

Referensi:

HTML5: The Next HTML (Part #1)


HTML5 merupakan generasi terbaru dari HTML. HTML sendiri pertama kali diciptakan pada 1990 dan versi keempatnya, HTML4, pada 1997. Sejak kemunculan HTML4, telah terjadi banyak perubahan pada web. HTML5 akan menjadi standar baru dari HTML, XHTML, dan HTML DOM yang selama ini dikembangkan secara terpisah.

Saat ini (Agustus 2011), HTML5 masih dalam tahap pengembangan. HTML5 belum memiliki standar akhir, dan belum satu pun browser yang mendukung penuh teknologi terbaru ini. Tetapi semua developer browser utama (Safari, Chrome, Firefox, Opera, Internet Explorer) terus mengembangkan aplikasi mereka agar mendukung HTML5.

HTML5 merupakan hasil pengembangan bersama antara World Wide Web Consortium (W3C) dan Web Hypertext Application Technology Working Group (WHATWG). Sebelumnya, WHATWG mengembangkan aplikasi dan form web, dan W3C mengembangkan XHTML 2.0. Pada tahun 2006, kedua pengembang ini bekerjasama dan membuat generasi terbaru HTML.

Pengembangan HTML5 memiliki ciri sebagai berikut

  • Berbasis pada HTML, CSS, DOM, dan JavaScript
  • Mengurangi pemakaian plug-in eksternal (seperti Adobe Flash)
  • Penanganan error yang lebih baik
  • Lebih menggunakan markup daripada scripting
  • HTML5 bersifat device independent
  • Pengembangannya bersifat terbuka
  • Pemanbahan fitur baru

Beberapa fitur baru yang dimiliki HTML5

  • Penggunaan elemen/tag <canvas> untuk menggambar
  • Penggunaan tag <video> dan <audio> untuk playback media
  • Local offline storage yang lebih baik menggantikan cookie
  • Penggunaan elemen baru yang lebih content specific seperti <article>, <footer>, <header>, <nav>, dan <section>
  • Elemen form yang baru seperti <calendar>, <date>, <time>, <email>, <url>, dan <search>
Pada part#2 akan dipaparkan elemen-elemen baru dalam HTML5.