เทคนิคการทำ hilight text field textarea เมื่อมีการโฟกัสเพื่อทำการกรอก หรือพิมพ์ข้อมูล โดยไม่ต้องแทรกโค้ด javascript ไว้ใน html หลักการคล้ายกับ jquery หรือเป็นรูปแบบที่ jquery นำไปประยุกต์ใช้
CSS code คลาสสำหรับทำ hilight
1 2 3 4 5 6 7 | <style type="text/css">.hi_light{ border:1px #333333 inset; background-color:#FFCC33; color:#000000;}</style> |
Javascript Code
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 | <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
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 | <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> |
