文本框(input)获取焦点时改变样式

作者：发布时间：2014-06-13 点击：

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

--------------------------------------------------------------
浏览示例文件:
http://www.codebit.cn/pub/html/javascript/tip/input_focus/input_focus.php
--------------------------------------------------------------

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

上一篇：UpdatePanel无法直接弹出窗口的解决
下一篇：使用Global.asax的Application_Error记录Exception信息

新闻资讯

2010-10-02
SQL Server 中截取日期的日期部分与时间部分
2023-02-22
vue-cli 3.x 的 views 和 components有什么区别？
2020-08-01
分布式数据库技术与产业快速走向成熟
2012-06-30
10种我常用的外链方法
2019-03-27
网站制作推广，让电子商务潮流不可阻挡
2012-06-30
百度官方对网站返回错误页面的解释与操作方案