[ZT]文本框(input)获取焦点(onfocus)时样式改变的实现方法

摘要: Javascript:

 
<script type="text/javascript"> 
// 说明：文本框(input)获取焦点(onfocus)时样式改变的实现方法 
// 整理：http://www.CodeBit.cn 
 
// focusClass : 获取焦点时的样式 
// normalClass : 正常状态下的样式 

function focusInput(focusClass, normalClass) { 
    var elements = document.getElementsByTagName("input"); 
    for (var i=0; i < elements.length; i++) { 
        if (elements[i].type != "button" && elements[i].type != "submit" && elements[i].type != "reset") { 
            elements[i].onfocus = function() { this.className = focusClass; }; 
            elements[i].onblur = function() { this.className = normalClass||''; }; 
        } 
    } 

} 
</script> 
 

测试代码：
HTML:

 

<style type="text/css"> 
.normalInput { 
    border:1px solid #ccc; 
} 
.focusInput { 
    border:1px solid #FFD42C; 
} 

</style> 
 

<script type="text/javascript"> 
window.onload = function () { 
    focusInput('focusInput', 'normalInput'); 
} 

</script> 
 
文本框：<input type="text" class="normalInput" />