สร้าง placeholder plugin ด้วย jQuery

ในบทความนี้เป็นตัวอย่าง การสร้าง placeholder plugin ด้วย jQuery ซึ่งถ้าใครไม่รู้จัก placeholder ผมจะพยายามอธิบายให้เข้าใจง่ายๆนั้นคือเจ้า placeholder คือ คำอธิบายสั้นๆที่จะแสดงผลใน input form เพื่อให้ผู้ใช้ได้รู้ว่า input form ควรจะกรอกข้อมูลอะไร ถ้ามองภาพไม่ออกให้ดูในภาพข้างล่างเลยครับ

ซึ่งเจ้า placeholder ก็เป็น attribute ใหม่ใน input form ที่มากับ HTML5 ซึ่งถ้าใครเป็น web developer นั้นจะรู้ดีว่า Browser รุ่นเก่าๆอย่าง IE7, IE8 นั้นไม่สนับสนุน HTML5
แล้วคุณจะทำอย่างไรละถ้าต้องการใช้งานเจ้า placeholder

ลองดูตัวอย่าง code ในส่วนของ placeholder plugin

$.fn.placehold = function(){
 var placeholderEmpty = function() {
  var $this = $(this);
  if ($this.val() == $this.data("placeholder")) {
   $this.val("");
  }
 };

 var placeholderDefault = function () {
  var $this = $(this);
  if ($this.val() == "") {
   $this.val($this.data("placeholder"));
  }
 };

 return function(placeholder) {
  this.data("placeholder", placeholder)
  .focusin(placeholderEmpty)
  .focusout(placeholderDefault)
  .trigger("focusout");
 }
}(jQuery);

วิธีเรียกใช้งาน placeholder plugin

$(function() {
 var username = $('#username');
 var password = $('#password');
 username.placehold('Username');
 password.placehold('Password');
});

ตัวอย่าง demo placholder plugin jquery