通过JS实现文本框获得输入焦点时的状态

今天做了一个通过JS处理，让页面上的文本框都会有当获得输入焦点（onfocus）时改变状态的效果，这样的效果是对用户体验的提高是很有利的，因为操作者可以很清晰的看到哪个正在输入哪个地方，尤其是在内容过多的情况下。
这个算是投石引玉啦，可以大家可以试着讨论一些新的效果，像如何通过更简单的方法给每个框加上动态显示的提示文字等，呵呵
不多说，看到一下图:

AutoFormStyle:



HTML代码：

<! 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 > AutoFormStyle - Example - Signup </ title >
< style  type ="text/css"  media ="all" > @import 'styles/autoformstyle.css'; </ style >
< script  type ="text/javascript"  src ="scripts/autoformstyle.js" ></ script >
</ head >

< body >
< div  class ="form" >
     < h2 > Create a Blog </ h2 >
     < ul >
         < li >< label >< span > * </ span > Username </ label >< input  type ="text"   style ="width:220px;"   /></ li >         
         < li >< label >< span > * </ span > Password </ label >< input  type ="password"  style ="width:220px;"    /></ li >
         < li >< label >< span > * </ span > Confirm Password </ label >< input  type ="password"  style ="width:220px;"    /></ li >
         < li >< label >< span > * </ span > Blog Title </ label >< input  type ="text"  style ="width:320px;"   /></ li >
         < li >< label >< span > * </ span > Country </ label >< select >< option > China </ option >< option > Unitid State </ option ></ select ></ li >
         < li >< label > About You </ label >< textarea  style ="width:300px;height:180px;" > 自动给表单的文本框加上动态事件的效果，用户体验大大地提高了。 </ textarea ></ li >
         < li >< label > &nbsp; </ label > Author: < a  href ="http://huacn.cnblogs.com"  target ="_blank" > Huacn Lee </ a >   < a  href ="http://www.wathon.com"  target ="_blank" > Wathon Team </ a ></ li >         
         < li >< label > &nbsp; </ label >< input  type ="submit"  value ="I agree it and create my blog"   /></ li >
     </ ul >
     < script  type ="text/javascript" > initAutoFormStyle(); </ script >
</ div >
</ body >

</ html >

CSS代码：

@import 'html.css';
.form
{
    text-align : left ;
    width : 500px ;
    margin : 40px auto ;
    background : #FFF ;
    border : 1px solid #CCC ;
    padding : 10px ;
    height : 500px ;
}

.form input { font-size : 16px ;  font-family : vVerdana, Geneva, Arial, Helvetica, sans-serif ; }
.form input.text,textarea.text {
    padding : 2px 4px ;
    border : 1px solid #DDD ;
    color : #666 ;     
}

.form input.focus,textarea.focus {
    padding : 2px 4px ;
    background : #F5FEEB ;
    border : 1px solid #CDFA9C ;
    color : #666 ;
}



.form h2 {
    font-size : 32px ;
    color : #A8DF00 ;
    font-weight : bold ;
    font-style : italic ;
    border-bottom : 2px dashed #CCC ;
    padding : 6px ;
}


.form ul  {
    list-style-type : none ;
    margin : 0 ;
    padding : 8px ;
}

.form ul li  {
    line-height : 30px ;
    padding : 2px 0 ;
    clear : both ;
}

.form ul li label  {
    width : 140px ;
    text-align : right ;
    font-weight : bold ;
    display : block ;
    float : left ;
    margin-right : 5px ;
    color : #555 ;
}

.form ul li label span { color : red ; margin-right : 2px ;  line-height : 24px ; }

Javascript代码：

// ---------------------------------
// 自动给表单上的文本框加上动态效果Js
// Author： Huacn Lee
// Version:1.0.0
// http://www.wathon.com
// =================================
var  __txtArray;
function  initAutoFormStyle()
{        
     var  inputArry;
    inputArry  =  document.getElementsByTagName( " input " );
    textArry  =  document.getElementsByTagName( " textarea " );
     for ( var  i = 0 ;i < inputArry.length + textArry.length;i ++ )
    {
         var  tmpInput  =   null ;
         if (i <  inputArry.length)
        {
            tmpInput  =  inputArry[i];
             if (tmpInput.type  ==  'text'  ||  tmpInput.type  ==  'password'  ||  tmpInput.type  ==  'file')
            {
                setEvent(tmpInput);
            }
        }
         else
        {
            tmpInput  =  textArry[inputArry.length  -  i];
            setEvent(tmpInput);
        }
    }
}

function  setEvent(obj)
{
     var  newClassName  =  'text';
     var  focusClassName  =  'focus';
     if (obj.style.className  !=  undefined)
    {
        newClassName  =  obj.style.className  +  ' '  +  newClassName;
        focusClassName  =   obj.style.className  +  ' '  +  focusClassName;
    }
    obj.className  =  newClassName;
    obj.onblur  =   function (){
         this .className  =  newClassName;
    }
    obj.onfocus  = function (){
         this .className  =  focusClassName;
    }
}