สวัสดีจร้าาาาา วันศุกร์สักทีนะเจ้าพวกมนุษย์เงินเดือนทั้งหลาย หลังจากที่ลุยงานกันมาทั้งสัปดาห์จะว่าเหนื่อยก็เหนื่อย จะว่าสบายก็สบาย ฮ่าๆ สรุปไงว่ะเนี่ย อ่ะๆ เอาเป็นว่าบทความนี้มาลองเล่น jQuery กันดีกว่า
โจทย์ของเราคือทำฟอร์มล็อกอินโดยที่เราจะบอกกับผู้ใช้งานว่ากล่องใหนสำหรับกรอก Username กล่องไหนสำหรับ Password โดยที่ไม่ต้องใช้แท็กตัวอักษรสำหรับบอกให้ User รู้ สรุปง่ายๆก็คือบอกมันใน textbox นั่นแหละครับ แต่เพื่อให้ล้ำขึ้นมาหน่อยเวลา User บังเกิดเกล้าคลิกแล้วจะให้มันล้าง Textbox ด้วย ตามโค๊ดตัวอย่างนี้เลยครับ
ขั้นแรกอย่าลืมเพิ่มโค๊ดสำหรับเรียกใช้ jQuery นะครับ
<head> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"> </script> </head>
ต่อมาเป็นโค๊ดสำหรับตัว Textbox นะครับ
<input id="ctb" type="text" value="Example"/>
<script>
$(document).ready(function(){
//ฟังก์ชันเมื่อมีการคลิก
$("#ctb").click(function(){
if($("#ctb").val() == "Example")
{
$("#ctb").attr("value","");
}
});
//ฟังก์ชัเมื่อออกจากการพิมพ์ใน Textbox
$("#ctb").blur(function(){
if($("#ctb").val() == "")
{
$("#ctb").attr("value","Example");
}
});
});
</script>
Demo
