การ hilight form ฟอร์มด้วย javascript อย่างง่าย

เขียนเมื่อ 15 ปีก่อน โดย Ninenik Narkdee
hilight form javascript

คำสั่ง การ กำหนด รูปแบบ ตัวอย่าง เทคนิค ลูกเล่น การประยุกต์ การใช้งาน เกี่ยวกับ hilight form javascript

ดูแล้ว 11,014 ครั้ง


เทคนิคการทำ hilight text field textarea เมื่อมีการโฟกัสเพื่อทำการกรอก หรือพิมพ์ข้อมูล โดยไม่ต้องแทรกโค้ด javascript ไว้ใน html หลักการคล้ายกับ jquery หรือเป็นรูปแบบที่ jquery นำไปประยุกต์ใช้

CSS code คลาสสำหรับทำ hilight

<style type="text/css">
.hi_light{
	border:1px #333333 inset;
	background-color:#FFCC33;
	color:#000000;
}
</style>

Javascript Code

<script language="javascript">
window.onload=function(){
	var mytext=document.form1.elements;
	for(i=0;i<mytext.length;i++){
		if(mytext[i].type!="" && mytext[i].type!="submit"){
			mytext[i].onfocus=function(){
				this.className='hi_light';
			}
			mytext[i].onblur=function(){		
				this.className='';			
			}	
		}
	}
}
</script>

HTML code

<form id="form1" name="form1" method="post" action="">
  <p>ชื่อ
    <input type="text" name="textfield" />
</p>
  <p>
    นามสกุล
    <input type="text" name="textfield2" />
  </p>
  <p>เพศ
    <input name="radiobutton" type="radio" value="radiobutton" />
  ชาย
  <input name="radiobutton" type="radio" value="radiobutton" />
  หญิง</p>
  <p>
    ที่อยู่
    <textarea name="textarea" rows="5"></textarea>
</p>
  <p>
    <input type="submit" name="Submit" value="Submit" />
  </p>
</form>





กด Like หรือ Share เป็นกำลังใจ ให้มีบทความใหม่ๆ เรื่อยๆ น่ะครับ











URL สำหรับอ้างอิง





คำแนะนำ และการใช้งาน

สมาชิก กรุณา ล็อกอินเข้าระบบ เพื่อตั้งคำถามใหม่ หรือ ตอบคำถาม สมาชิกใหม่ สมัครสมาชิกได้ที่ สมัครสมาชิก


  • ถาม-ตอบ กรุณา ล็อกอินเข้าระบบ
  • เปลี่ยน


    ( หรือ เข้าใช้งานผ่าน Social Login )







เว็บไซต์ของเราให้บริการเนื้อหาบทความสำหรับนักพัฒนา โดยพึ่งพารายได้เล็กน้อยจากการแสดงโฆษณา โปรดสนับสนุนเว็บไซต์ของเราด้วยการปิดการใช้งานตัวปิดกั้นโฆษณา (Disable Ads Blocker) ขอบคุณครับ