สร้าง watermark ลายน้ำ ให้กับช่อง สำหรับการค้นหา ด้วย jQuery และ CSS อย่างง่าย

ตัวอย่างผลลัพธ์

CSS สำหรับกำหนดคุณสมบัติลายน้ำ ในที่ใช้รูปจาก google สำหรับทดสอบ สามารถแทนรูปภาพอื่นได้

<style type="text/css">
.watermark{
	background:url(http://www.google.com/cse/intl/en/images/google_site_search_watermark.gif) no-repeat 5px 2px;
}
</style>

HTML Code ตัวอย่าง

<form id="form1" name="form1" method="post" action="">
  <input name="kw" type="text" id="kw" size="45" />
  <input type="submit" name="Sbt" id="Sbt" value="ค้นหา" />
</form>

Javascript Code

<script src="http://www.google.com/jsapi" type="text/javascript"></script>
<script type="text/javascript">
google.load("jquery", "1.3.2");
</script>
<script type="text/javascript">
$(function(){
	var objKey="#kw"; // id ของ ช่องค้นหา 
	if($(objKey).val()==""){
			$(objKey).addClass("watermark");
	}	
	$(objKey).focus(function(){	 
		$(objKey).removeClass("watermark");			 
	}).blur(function(){
		if($(objKey).val()==""){
			$(objKey).addClass("watermark");
		}	
	});	
});
</script>