input 的用户体验提升

<! 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 > Document </ title >
< style >
input { float : left ; clear : left ; margin : 3px 0 ; }
</ style >
< script >
window.onload = function (){
var inputTags = document.getElementsByTagName( ' input ' );
var blurCss = ' background:#fff; border:1px solid #ccc; ' ;
for ( var i = 0 , n = inputTags.length; i < n; i ++ ){
if (inputTags[i].type == ' text ' ){
inputTags[i].style.cssText = blurCss;
inputTags[i].onfocus = function (){
this .style.cssText = ' background:#f90; border:1px solid #ccc; ' ;
}
inputTags[i].onblur = function (){
this .style.cssText = blurCss;
}
}
}
}
</ script >
</ head >
< body >
< input type ="text" value ="aa" />
< input type ="text" value ="bb" />
< input type ="text" value ="cc" />
< input type ="text" value ="dd" />
</ body >
</ html >