原帖:http://www.cnblogs.com/rubylouvre/archive/2009/12/07/1618182.html
跟随司徒正美兄的一个实践。
window.onload = function(){
var inputs = document.getElementsByTagName('input');
for(var i=0, n=inputs.length; i<n; i++){
inputs[i].style.cssText = 'background:#eee; border:1px solid #ccc;';
inputs[i].onfocus = function(){
this.style.cssText = 'background:#7ecef4; border:1px solid #00a0e9;';
}
inputs[i].onblur = function(){
this.style.cssText = 'background:#eee; border:1px solid #ccc;';
}
}
}
var inputs = document.getElementsByTagName('input');
for(var i=0, n=inputs.length; i<n; i++){
inputs[i].style.cssText = 'background:#eee; border:1px solid #ccc;';
inputs[i].onfocus = function(){
this.style.cssText = 'background:#7ecef4; border:1px solid #00a0e9;';
}
inputs[i].onblur = function(){
this.style.cssText = 'background:#eee; border:1px solid #ccc;';
}
}
}
HTML结构:
<form name="myForm">
<input tabindex="1" value="第一个">第一个<br />
<input tabindex="3" value="第三个">第三个<br />
<input tabindex="2" value="第二个">第二个<br />
<input tabindex="5" value="第五个">第五个<br />
<input tabindex="4" value="第四个">第四个<br />
<input tabindex="6" value="第六个">第六个<br />
</form>
<input tabindex="1" value="第一个">第一个<br />
<input tabindex="3" value="第三个">第三个<br />
<input tabindex="2" value="第二个">第二个<br />
<input tabindex="5" value="第五个">第五个<br />
<input tabindex="4" value="第四个">第四个<br />
<input tabindex="6" value="第六个">第六个<br />
</form>