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

 

<script type="text/javascript">
// 说明：文本框(input)获取焦点(onfocus)时样式改变的实现方法
// 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>

 

<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" />