文本框(input)获取焦点(onfocus)时样式改变的示例代码


Posted in Javascript onJanuary 10, 2014

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

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

 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") { 
                 //if(elements[i].type=="text"){
                   elements[i].onfocus = function() { this.className = focusClass; }; 
                   elements[i].onblur = function() { this.className = normalClass||''; }; 
                } 
             }
        }
        window.onload = function() {
            focusInput('focusInput', 'normalInput');
        }

<style type="text/css"> 
.normalInput { border:1px solid #ccc; } 
.focusInput {    border:1px solid #FFD42C; } 
</style>
Javascript 相关文章推荐
基于JavaScript实现继承机制之构造函数+原型链混合方式的使用详解
May 07 Javascript
Javascript级联下拉菜单以及AJAX数据验证核心代码
May 10 Javascript
window.open 以post方式传递参数示例代码
Feb 27 Javascript
Javascript限制网页只能在微信内置浏览器中访问
Nov 09 Javascript
浅谈$(document)和$(window)的区别
Jul 15 Javascript
巧用Vue.js+Vuex制作专门收藏微信公众号的app
Nov 03 Javascript
通过sails和阿里大于实现短信验证
Jan 04 Javascript
React-Native 组件之 Modal的使用详解
Aug 08 Javascript
vue组件父与子通信详解(一)
Nov 07 Javascript
jQuery实现文件编码成base64并通过AJAX上传的方法
Apr 12 jQuery
在Vue中创建可重用的 Transition的方法
Jun 02 Javascript
JavaScript中arguments的使用方法详解
Dec 20 Javascript
Script标签与访问HTML页面详解
Jan 10 #Javascript
浅析jquery ajax异步调用方法中不能给全局变量赋值的原因及解决方法
Jan 10 #Javascript
JQuery中使用Ajax赋值给全局变量异常的解决方法
Jan 10 #Javascript
jquery和javascript中如何将一元素的内容赋给另一元素
Jan 09 #Javascript
引入JS文件IE6报语法错误或缺少对象问题的解决方法
Jan 09 #Javascript
JQuery实现鼠标移动到图片上显示边框效果
Jan 09 #Javascript
图片翻转效果具体实现代码
Jan 09 #Javascript
You might like
Windows下的PHP5.0详解
2006/11/18 PHP
基于Zookeeper的使用详解
2013/05/02 PHP
sql注入与转义的php函数代码
2013/06/17 PHP
Yii2框架可逆加密简单实现方法
2017/08/25 PHP
PHP7 echo和print语句实例用法
2019/02/15 PHP
禁止直接访问php文件代码分享
2020/05/05 PHP
JavaScript DOM 学习第三章 内容表格
2010/02/19 Javascript
基于jquery的滑动样例代码
2010/11/20 Javascript
有关于JS构造函数的重载和工厂方法
2013/04/07 Javascript
Jquery+asp.net后台数据传到前台js进行解析的方法
2014/05/11 Javascript
jQuery+Ajax实现无刷新分页
2015/10/30 Javascript
基于Jquery和CSS3制作数字时钟附源码下载(CSS3篇)
2015/11/24 Javascript
深入理解JS实现快速排序和去重
2016/10/17 Javascript
非常优秀的JS图片轮播插件Swiper的用法
2017/01/03 Javascript
浅谈DOM的操作以及性能优化问题-重绘重排
2017/01/08 Javascript
vue组件传递对象中实现单向绑定的示例
2018/02/28 Javascript
使用Angular 6创建各种动画效果的方法
2018/10/10 Javascript
JS/HTML5游戏常用算法之碰撞检测 包围盒检测算法详解【圆形情况】
2018/12/13 Javascript
js实现一个页面多个倒计时的3种方法
2019/02/25 Javascript
vue-dplayer 视频播放器实例代码
2019/11/08 Javascript
玩转python爬虫之爬取糗事百科段子
2016/02/17 Python
Python使用cx_Freeze库生成msi格式安装文件的方法
2018/07/10 Python
python统计中文字符数量的两种方法
2019/01/31 Python
基于python实现的百度音乐下载器python pyqt改进版(附代码)
2019/08/05 Python
Python 写了个新型冠状病毒疫情传播模拟程序
2020/02/14 Python
Python 读取有公式cell的结果内容实例方法
2020/02/17 Python
用python按照图像灰度值统计并筛选图片的操作(PIL,shutil,os)
2020/06/04 Python
详解HTML5 Canvas标签及基本使用
2020/01/10 HTML / CSS
澳大利亚电子产品购物网站:Dick Smith
2017/02/02 全球购物
Bench加拿大官方网站:英国城市服装品牌
2017/11/03 全球购物
双立人加拿大官网:Zwilling加拿大
2020/08/10 全球购物
六一儿童节活动策划方案
2014/01/27 职场文书
同学聚会策划方案
2014/06/06 职场文书
js实现上传图片到服务器
2021/04/11 Javascript
详解JSON.parse和JSON.stringify用法
2022/02/18 Javascript
《废话连篇——致新手》——chinapizza
2022/04/05 无线电