文本框(input)获取焦点(onfocus)时样式改变的实现方法
时间：2009年03月25日作者：愚人码头查看次数:4,327 views评论次数：0
许多重视用户体验的设计师都希望给文本框(input)加上获取焦点或者鼠标悬停时的样式切换效果。其实很简单，我们只需要获取页面上的文本框，加上onfocus事件或者其他对应的事件即可。本文介绍了如何在获取焦点时切换样式，明白原理后，实现其他效果就很简单了。
设置某一个文本框为焦点：
document.getElementById(“username”).focus();//设置用户名的文本框为焦点。
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” />
声明: 本文采用 BY-NC-SA 协议进行授权 | WEB前端开发
转载请注明转自《文本框(input)获取焦点(onfocus)时样式改变的实现方法》
如果你读了我的文章，觉得有帮助： 
说明
说明
发表评论
暂时没有评论！