Sekiranya anda tidak faham yang yang saya maksudkan. Boleh rujuk sini.
Teknik ini sesuai digunakan bagi fungsi carian. Untuk artikel kali ini, saya cuma menunjukkan bagaimana mahu melakukan pencetus(trigger) untuk sesuatu acara (event) menggunakan kekunci Enter. Seperti artikel sebelum ini, saya menunjukkan bagaimana melakukannya menggunakan Jquery.
Mula-mula kita haruslah memasukkan pautan fail jquery ke kod html.
<script type="text/javascript" src="jquery-1.6.min.js"></script>
Kemudian kita haruslah meletakkan kesemua kod yang terlibat didalam $().ready. Ini bagi memboleh skrip dapat dijana selepas halaman selesai di muatkan kedalam pelayar.
$(document).ready(function(){
//skrip akan berada disini.
});
Terdapat 2 fungsi utama yang diperlukan. Iaitu .focus() dan juga .keyup(). Focus bagi membolehkan skrip hanya dilarikan ketika pengguna sedang menaip textbox tertentu. Sudah pastinya kita tidak mahu halaman kita menjadi menjengkelkan apabila pengguna tersilap menekan butang Enter.
Fungsi .keyup() pula membolehkan jquery membaca setiap kekunci yang ditekan pada papan kekunci. Ini bagi membolehkan jquery mengetahui kekunci Enter telah ditekan
$("#idTextbox").focus(function(){
$("#idTextbox").keyup(function(event){
//pemeriksaan kekunci Enter akan berlaku disini
})
})
Didalam fungsi .keyup(), pemeriksaan kepada setiap kekunci yang ditekan akan dilakukan. Nilai bagi butan Enter adalah 13. Untuk bahagian ini kita hanya menggunakan javascript. Tidak perlu menggunakan fungsi jquery.
var e = (event.keyCode ? event.keyCode : (event.which ? event.which : event.charCode));
if (e == 13){
alert($("#search").val());
$("#search").blur();
}
Memandangkan untuk demo ini saya hanya memaparkan data yang ditaip pada alert, maka saya menambah fungsi .blur() bagi menghilangkan fokus dari textbox supaya apabila menekan butang Enter pada alert tidak menjana alert yang baru.
<html>
<head>
<title>
On Enter
</title>
<script type="text/javascript" src="jquery-1.6.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#search").focus(function(){
$("#search").keyup(function(event){
var e = (event.keyCode ? event.keyCode : (event.which ? event.which : event.charCode));
if (e == 13){
alert($("#search").val());
$("#search").blur();
}
});
});
});
</script>
</head>
<body>
<input type="text" name="search" id="search" />
</body>
</html>
Terima kasih kepada Salimi dari AIST kerana membuat rekaan yang cantik untuk poster serta mug. Terima kasih kepada Marcel Leng kerana mendapatkan tajaan dari Experian Hitwise. Terima kasih kepada Azrad kerana mendapatkan tajaan dari Primuscore. Terima kasih kepada Misbah, kerana mendapatkan tajaan dari Jmobile. Terima kasih juga kepada Amran kerana mendapatkan tajaan dari AIST.