ทบทวน ลำดับ การทำงาน keyboard events ของ input text ใน jQuery
28 December 2010เนื้อหาส่วนนี้เป็นการ ทบทวน ลำดับ events ของ keyboard และ mouse บางส่วน
ในการใช้งาน กับ input text element จะแบ่งออกเป็น 2 กรณี ในการแนะนำ
กรณีที่ 1 เริ่มตั้งแต่ การใช้ปุ่ม Tab ใน keyboard เลื่อนไปยัง input text element
ลำดับ events จะเป็นดังนี้
// เริ่มกดแท็บ เข้ามาใน input text
1.focusin
2.focus
3.keyup
// 4 - 6 เป็นกรณีการพิมพ์ข้อมูลเข้าไปใน input text
4.keydown
5.keypress
6.keyup
// กดแท็บออกจาก input text
7.keydown
8.change
9.focusout
กรณีที่ 2 เริ่มจากการใช้ mouse คลิกที่ input text element
ลำดับ events จะเป็นดังนี้
// เริ่มคลิกที่ input text
1.focusin
2.focus
3.click
// 4 - 6 เป็นกรณีการพิมพ์ข้อมูลเข้าไปใน input text
4.keydown
5.keypress
6.keyup
// คลิกเมาส์ด้านนอก input text
7.change
8.focusout
หมายเหตุ::
--- ถ้าไม่มีการพิมพ์ หรือแก้ไขข้อมูล ใน input text แล้ว
event ที่ 4 ถึง 6 และ 8 ในกรณีที่ 1 จะไม่เกิดขึ้น
event ที่ 4 ถึง 7 ในกรณีที่ 2 จะไม่เกิดขึ้น
ถ้า cursor สำหรับพิมพ์อยู่ที่ input text แล้ว หากทำการคลิกซ้ำ
event ที่ 1 และ 2 ในกรณีที่ 2 จะไม่เกิดขึ้น
ตัวอย่างโค้ดทั้งหมดสำหรับทดสอบ (console.log ใช้ firebug หรือ developer tools)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>keyboard event</title>
</head>
<body>
<input type="text" name="text1" id="text1" on />
<br />
<br />
<input type="password" name="text2" id="text2" />
<br />
<br />
<input type="text" name="text3" id="text3" />
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
<script type="text/javascript">
$(function(){
$("#text2").focus(function(){
console.log("focus");
});
$("#text2").focusin(function(){
console.log("focusin");
});
$("#text2").focusout(function(){
console.log("focusout");
});
$("#text2").keyup(function(){
console.log("keyup");
});
$("#text2").keydown(function(){
console.log("keydown");
});
$("#text2").click(function(){
console.log("click");
});
$("#text2").change(function(){
console.log("change");
});
$("#text2").keypress(function(){
console.log("keypress");
});
});
</script>
</body>
</html>
บทความในหมวดที่่น่าสนใจ อื่นๆ
บทความคนเข้าอ่านวันนี้
30 Nov 10 การนำเสนอ และแสดงข้อมูล ด้วย jQuery Flexigrid Plugin เบื้องต้น อ่าน 5670 25 Sep 08 การกำหนด selectors ด้วย jQuery เกี่ยวกับ form อ่าน 4760 09 Aug 10 ประยุกต์ jQuery UI ปฏิทิน Datepicker แสดงภาษาไทย และใช้ ปี พ.ศ. อ่าน 11919 03 Nov 08 การส่งข้อมูลแบบ POST ด้วย Ajax อ่าน 9714 13 Oct 08 คำสั่ง SQL AND OR อ่าน 3448 17 Jan 11 เทคนิค วิธี การแสดงข้อมูล ด้วยเงื่อนไข วันที่ date ใน mysql อ่าน 5377 22 Mar 09 สร้างฟังก์ชันโชว์รูปภาพขนาดใหญ่ด้วย javascript แบบง่าย อ่าน 5411 04 Jun 09 สร้างเมนูย่อย ให้กับข้อความ เมื่อนำเม๊าท์ไปชี้ mouseover ด้วย css และ jquery อย่างง่าย อ่าน 7825 10 Sep 10 ค้นหา พิกัด ค่า latitude และ longitude ใน Google Map จากฃื่อสถานที่ อ่าน 7740 18 Mar 10 การเก็บข้อมูลวันที่ ในฐานข้อมูล กับคำสั่ง sql ในการค้นหา อ่าน 5880 25 Sep 08 ไม่ให้ทำการ คัดลอก ( Copy ) และ วาง ( Paste ) อ่าน 2775 11 Sep 10 กำหนด แก้ไข เปลี่ยนแปลง รูปแบบ ประเภท ของ แผนที่ map types ใน google map อ่าน 2436 17 Mar 09 สร้างฟังก์ชันลบเวลาด้วย php อย่างง่าย อ่าน 2527 08 Oct 10 การอัพเดท สถานะบน facebook อัตโนมัติ แบบ graph api ด้วย php sdk อ่าน 4418 27 Jun 11 ลูกเล่น เพิ่มช่องรับ input type file อัตโนมัติ ด้วย jQuery อ่าน 4210 29 Oct 08 สร้างปุ่มแบ่งหน้าให้ดูดีด้วย css อย่างง่าย อ่าน 7118 23 Nov 08 สร้างเมนูแท็บ Tab menu ด้วย jQuery + CSS อย่างง่าย อ่าน 27468 12 Nov 10 ประยุกต์ php ฟังก์ชัน time() อย่างง่าย กับการแสดง เงื่อนไข ช่วงเวลา อ่าน 3200 09 Nov 11 แนวทางการสร้างเมนูหลายภาษา อย่างง่ายด้วย php และ javascript อ่าน 2517 05 Jul 09 สร้างฟังก์ชัน autocomplete ให้ใช้งานแบบง่าย ด้วย ajax อ่าน 15300