文本框(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 相关文章推荐
jQuery MD5加密实现代码
Mar 15 Javascript
ie中js创建checkbox默认选中问题探讨
Oct 21 Javascript
js自动生成的元素与页面原有元素发生堆叠的解决方法
Oct 24 Javascript
javascript中数组的冒泡排序使用示例
Dec 18 Javascript
jQuery避免$符和其他JS库冲突的方法对比
Feb 20 Javascript
jQuery Validate插件实现表单验证
Aug 19 Javascript
Javascript仿京东放大镜的效果
Mar 01 Javascript
AngularJS service之select下拉菜单效果
Jul 28 Javascript
jQuery模拟爆炸倒计时功能实例代码
Aug 21 jQuery
Angular之toDoList的实现代码示例
Dec 02 Javascript
js限制input只能输入有效的数字(第一个不能是小数点)
Sep 28 Javascript
使用Cargo工具高效创建Rust项目
Aug 14 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
php实现MD5加密16位(不要默认的32位)
2013/08/12 PHP
PHP合并静态文件详解
2014/11/14 PHP
php从完整文件路径中分离文件目录和文件名的方法
2015/03/13 PHP
php检查日期函数checkdate用法实例
2015/03/19 PHP
PHP 加密 Password Hashing API基础知识点
2020/03/02 PHP
Aster vs KG BO3 第一场2.18
2021/03/10 DOTA
IE6下js通过css隐藏select的一个bug
2010/08/16 Javascript
纯js实现瀑布流展现照片(自动适应窗口大小)
2013/04/08 Javascript
javascript对象的使用和属性操作示例详解
2014/03/02 Javascript
使用jsonp完美解决跨域问题
2014/11/27 Javascript
JavaScript获取文本框内选中文本的方法
2015/02/20 Javascript
在Node.js应用中使用Redis的方法简介
2015/06/24 Javascript
js实现选中复选框文字变色的方法
2015/08/14 Javascript
js中用cssText设置css样式的简单方法
2016/09/19 Javascript
jquery心形点赞关注效果的简单实现
2016/11/14 Javascript
Bootstrap基本样式学习笔记之表格(2)
2016/12/07 Javascript
JavaScript操作文件_动力节点Java学院整理
2017/06/30 Javascript
详解React native全局变量的使用(跨组件的通信)
2017/09/07 Javascript
vue axios 二次封装的示例代码
2017/12/08 Javascript
微信小程序绘制图片发送朋友圈
2019/07/25 Javascript
[43:57]LGD vs Mineski 2018国际邀请赛小组赛BO2 第二场 8.19
2018/08/21 DOTA
python自动裁剪图像代码分享
2017/11/25 Python
Python面向对象程序设计类的封装与继承用法示例
2019/04/12 Python
Python常见数据类型转换操作示例
2019/05/08 Python
关于Pytorch的MLP模块实现方式
2020/01/07 Python
基于python求两个列表的并集.交集.差集
2020/02/10 Python
Python 防止死锁的方法
2020/07/29 Python
CSS3+HTML5+JS 实现一个块的收缩与展开动画效果
2020/11/17 HTML / CSS
娇韵诗法国官网:Clarins法国
2019/01/29 全球购物
Antler英国官网:购买安特丽行李箱、拉杆箱
2019/08/25 全球购物
大学生求职自我评价
2014/01/16 职场文书
《雪地里的小画家》教学反思
2014/02/22 职场文书
机关单位人员学雷锋心得体会
2014/03/10 职场文书
高中教师评语大全
2014/04/25 职场文书
2015年综治宣传月活动总结
2015/03/25 职场文书
我的中国梦主题教育活动总结
2015/05/07 职场文书