Validasi karakter keyboard dengan javascript – Hi bret kali ini saya akan share ke kalian cara validasi inputan karakter keyboard dengan javascript di web html, artinya kalian bisa mengecualikan karakter simbol tertentu yang tidak bisa di inputkan. Misalnya tidak bisa menginput spasi, tanda petik (‘), atau strip ( – ).
Terkadang di dalam membuat aplikasi atau website terdapat form seperti nip atau nama yang tidak boleh memasukkan karakter simbol tertentu, hal ini bertujuan untuk meminimalisir kesalahan di sebuah aplikasi yang kita buat.
Berikut cara membuat Validasi karakter keyboard dengan javascript silahkan kalian lihat tutorialnya.
1. Pertama kalian buat file html dengan nama index.php
<html>
<title>Form Validasi</title>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>
<body>
<form>
<div class="col-md-4">
<div class="form-group">
<label for="namamenu">
NIP Pegawai
</label>
<input type="text" title="Tidak boleh menggunakan spasi" required name="nippegawai" class="form-control" id="id-nip" placeholder="Ketik disini . . .">
</div>
</div>
<div class="col-md-4">
<div class="form-group">
<label for="url">Nama Pegawai</label>
<input type="text" title="Tidak boleh menggunakan tanda petik ' " required name="namapegawai" class="form-control" id="id-nama" placeholder="Ketik disini . . .">
</div>
</div>
<div class="col-md-6">
<button type="submit" class="btn btn-primary">
<i class="fas fa-save"> </i>
Simpan
</button>
</div>
</form>
</body>
</html>
<script type="text/javascript">
$("#id-nip").on({
keydown: function(e) {
if (e.which === 32)
return false;
},
change: function() {
this.value = this.value.replace(/\s/g, "");
}
});
$("#id-nama").on({
keydown: function(e) {
if (e.which == 222 || e.which == 221 || e.which == 219 || e.which == 220 || e.which == 187)
return false;
},
});
</script>Penjelasan dari code script di atas :
Karena ini adalah fungsi dari jQuery maka kita harus menempatkan library jQuery di dalam <head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>Form bagian inputan NIP :
<label for="namamenu"> NIP Pegawai </label>
<input type="text" title="Tidak boleh menggunakan spasi" required name="nippegawai" class="form-control" id="id-nip" placeholder="Ketik disini . . ."> Form bagian inputan Nama :
<label for="url">Nama Pegawai</label>
<input type="text" title="Tidak boleh menggunakan tanda petik ' " required name="namapegawai" class="form-control" id="id-nama" placeholder="Ketik disini . . .">dari form inputan tersebut terdapat id (id-nip) & (id-nama) untuk memanggil fungsi di JavaScript.
Berikut Code JavaScript :
Bagian NIP terdapat kode 32 adalah kode nomor spasi keyboard, lalu pada function value.replace adalah fungsi ketika ada spasi di dalam inputan sebelumnya akan otomatis terhapus spasinya
$("#id-nip").on({
keydown: function(e) {
if (e.which === 32)
return false;
},
change: function() {
this.value = this.value.replace(/\s/g, "");
}
});Bagian Nama :
$("#id-nama").on({
keydown: function(e) {
if (e.which == 222 || e.which == 221 || e.which == 219 || e.which == 220 || e.which == 187)
return false;
},
});Nah untuk pengujian tersebut terdapat beberapa kode nomor keyboard yaitu :
222 = ‘
221 = } ]
219 = { [
220 = | \
187 = +
Kalian dapat melihat kode nomor – nomor tersebut di sini , atau sudah saya tuliskan di bawah ini.
| Keyboard key Pressed | JavaScript Key Code value |
| backspace | 8 |
| tab | 9 |
| enter | 13 |
| shift | 16 |
| ctrl | 17 |
| alt | 18 |
| pause/break | 19 |
| caps lock | 20 |
| escape | 27 |
| page up | 33 |
| Space | 32 |
| page down | 34 |
| end | 35 |
| home | 36 |
| arrow left | 37 |
| arrow up | 38 |
| arrow right | 39 |
| arrow down | 40 |
| print screen | 44 |
| insert | 45 |
| delete | 46 |
| 0 | 48 |
| 1 | 49 |
| 2 | 50 |
| 3 | 51 |
| 4 | 52 |
| 5 | 53 |
| 6 | 54 |
| 7 | 55 |
| 8 | 56 |
| 9 | 57 |
| a | 65 |
| b | 66 |
| c | 67 |
| d | 68 |
| e | 69 |
| f | 70 |
| g | 71 |
| h | 72 |
| i | 73 |
| j | 74 |
| k | 75 |
| l | 76 |
| m | 77 |
| n | 78 |
| o | 79 |
| p | 80 |
| q | 81 |
| r | 82 |
| s | 83 |
| t | 84 |
| u | 85 |
| v | 86 |
| w | 87 |
| x | 88 |
| y | 89 |
| z | 90 |
| left window key | 91 |
| right window key | 92 |
| select key | 93 |
| numpad 0 | 96 |
| numpad 1 | 97 |
| numpad 2 | 98 |
| numpad 3 | 99 |
| numpad 4 | 100 |
| numpad 5 | 101 |
| numpad 6 | 102 |
| numpad 7 | 103 |
| numpad 8 | 104 |
| numpad 9 | 105 |
| multiply | 106 |
| add | 107 |
| subtract | 109 |
| decimal point | 110 |
| divide | 111 |
| f1 | 112 |
| f2 | 113 |
| f3 | 114 |
| f4 | 115 |
| f5 | 116 |
| f6 | 117 |
| f7 | 118 |
| f8 | 119 |
| f9 | 120 |
| f10 | 121 |
| f11 | 122 |
| f12 | 123 |
| num lock | 144 |
| scroll lock | 145 |
| My Computer (multimedia keyboard) | 182 |
| My Calculator (multimedia keyboard) | 183 |
| semi-colon | 186 |
| equal sign | 187 |
| comma | 188 |
| dash | 189 |
| period | 190 |
| forward slash | 191 |
| open bracket | 219 |
| back slash | 220 |
| close braket | 221 |
| single quote | 222 |
Kesimpulan
Kalian bisa menambahkan notifikasi validasi karakter simbol keyboard apa saja yang tidak boleh di inputkan agar pengguna tidak kebingungan saat menginputkan, atau kalian bisa edit pada title yang terdapat pada form input.
Demikian tutorial Validasi Karakter Keyboard dengan JavaScript semoga bermanfaat bagi kalian, silahkan tinggalkan komentar pada tulisan ini bila ingin bertanya atau memberi masukan. Semoga tulisan ini bisa memberikan manfaat untuk Anda yang membaca, sampai bertemu di tulisan berikutnya. Terima Kasih.
Selamat mencoba ya :D.
