当前位置: 代码迷 >> Web前端 >> 文本框(input)获取焦点(onfocus)时式样改变的实现方法
  详细解决方案

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

热度:510   发布时间:2012-10-08 19:54:56.0
文本框(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" />

?

?

  相关解决方案