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

许多重视用户体验的设计师都希望给文本框(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” />
赞(0) 打赏
未经允许不得转载:WEB前端开发 » 文本框(input)获取焦点(onfocus)时样式改变的实现方法

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

前端开发相关广告投放 更专业 更精准

联系我们

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏