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

许多重视用户体验的设计师都希望给文本框(input)加上获取焦点或者鼠标悬停时的样式切换效果。其实很简单,我们只需要获取页面上的文本框,加上onfocus事件或者其他对应的事件即可。本文介绍了如何在获取焦点时切换样式,明白原理后,实现其他效果就很简单了。

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

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

测试代码:

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

为所有的页面元素添加 :hover 属性

FireFox 下,所有的页面元素都有 :hover 属性,当鼠标悬停时,可以变换样式,能给用户一个好的体验。但是 IE 下面,只有超级链接标签(A)才具备此属性,本文介绍的是通过 expression 设置,解决 IE 的这一问题。

为所有的页面元素添加 :hover 属性 – 示例

 
<style type="text/css" media="projection, screen">
.whatever {
	background: #808080;
	padding: 20px;
}
.whatever:hover, .whateverhover {
	background: #eaeaea;
}
</style>
 
<!-- Additional IE/Win specific style sheet (Conditional Comments) -->
<!--[if lte IE 6]>
<style type="text/css" media="projection, screen">
.whatever {
	behavior: expression(
		this.onmouseover = new Function("this.className += ' whateverhover';"),
		this.onmouseout = new Function("this.className = this.className.replace(' whateverhover', '');"),
		this.style.behavior = null
	);
}
/*.whatever {
	background-color: expression(
		!this.js ? (this.js = 1,
			this.onmouseover = new Function("this.className += ' whateverhover';"),
			this.onmouseout = new Function("this.className = this.className.replace(' whateverhover', '');")
			) : false);
	);
}*/
/*.whatever {
	background-color: expression(
		this.onmouseover = new Function("this.className += ' whateverhover';"),
		this.onmouseout = new Function("this.className = this.className.replace('whateverhover', '');")
	);
}*/
</style>
<![endif]-->