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

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

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


--------------------------------------------------------------
点此浏览示例文件
--------------------------------------------------------------


Javascript:

1.  
2. <script type="text/javascript">
3. // 说明：文本框(input)获取焦点(onfocus)时样式改变的实现方法
4. // 整理：http://www.CodeBit.cn
5.  
6. // focusClass : 获取焦点时的样式
7. // normalClass : 正常状态下的样式
8. function focusInput(focusClass, normalClass) {
9. var elements = document.getElementsByTagName("input");
10. for (var i=0; i < elements.length; i++) {
11. if (elements[i].type != "button" && elements[i].type != "submit" && elements[i].type != "reset") {
12. elements[i].onfocus = function() { this.className = focusClass; };
13. elements[i].onblur = function() { this.className = normalClass||''; };
14. }
15. }
16. }
17. </script>
18.  




测试代码：
HTML:

1.  
2. <style type="text/css">
3. .normalInput {
4. border:1px solid #ccc;
5. }
6. .focusInput {
7. border:1px solid #FFD42C;
8. }
9. </style>
10.  
11. <script type="text/javascript">
12. window.onload = function () {
13. focusInput('focusInput', 'normalInput');
14. }
15. </script>
16.  
17. 文本框： <input type="text" class="normalInput" />
18.