[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:

• Cambia Research – Javascript Char Codes (Key Codes)
• JavaScript Madness: Keyboard Events