位置：首页>> 网络编程>> JavaScript>> 一个表单焦点效果函数

一个表单焦点效果函数

　来源：蓝色理想　发布时间：2008-01-19 10:59:00　

标签：表单,焦点,美化

一个表单焦点效果javascript函数，可以用在美化表单界面，挺好看的。

function validForms(){
      if(!document.getElementById) return false;
    var initform=document.getElementById("initform");
         for(var i=0,valids=initform.elements;i<valids.length;i++){
            if(valids[i].type=='submit') continue;
             valids[i].onfocus=function(){
               if(this.value==this.defaultValue){
                  this.value='';
                  this.style.color='#000';

               }
             }
             valids[i].onblur=function(){
              if(this.value==''){
                this.value=this.defaultValue;
                this.style.color='#dfdfdf';

                this.parentNode.onsubmit=function(){return false;}
              }

             }
         }
   }

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>表单的验证 - asp之家</title><style type="text/css"> label{ margin-right:15px;} #user,#pw,#qq,#tel{ border:1px solid #66CCFF;margin-top:30px;color:#DFDFDF;} #sub{ margin-top:30px;}</style><script type="text/javascript"> function validForms(){ if(!document.getElementById) return false; var initform=document.getElementById("initform"); for(var i=0,valids=initform.elements;i<valids.length;i++){ if(valids[i].type=='submit') continue; valids[i].onfocus=function(){ if(this.value==this.defaultValue){ this.value=''; this.style.color='#000'; } } valids[i].onblur=function(){ if(this.value==''){ this.value=this.defaultValue; this.style.color='#dfdfdf'; this.parentNode.onsubmit=function(){return false;} } } } } window.onload=validForms;</script></head><body><form action=http://www.aspxhome.com method="post" id="initform"> <label for="user">username:</label><input type="text" id="user" value="this is abalue"/><br /> <label for="pw">password:</label><input type="text" id="pw" value="this is abalue"/><br /> <label for="qq">QQ:</label><input type="text" id="qq" value="this is abalue"/><br /> <label for="tel">Tel:</label><input type="text" id="tel" value="this is abalue"/><br /> <input type="submit" value="提交" id="sub"/></form></body></html>

投稿

一个表单焦点效果函数

猜你喜欢