JavaScript实现为input与textarea自定义hover,focus效果的方法


Posted in Javascript onAugust 21, 2015

本文实例讲述了JavaScript实现为input与textarea自定义hover,focus效果的方法。分享给大家供大家参考。具体如下:

这里演示JavaScript为input输入框和textarea文本框自定义hover,focus效果,hover也就是鼠标放上去之后的效果,focus是鼠标焦点问题,要实现 这种效果,需要JS来配合,这个例子就是很不错的,它把网页上输入框和文本框都加入了鼠标悬停和鼠标焦点效果。

运行效果截图如下:

JavaScript实现为input与textarea自定义hover,focus效果的方法

在线演示地址如下:

具体代码如下:

<title>JavaScript为input/textarea自定义hover,focus效果</title>
<script type="text/javascript">
function suckerfish(type, tag, parentId) { 
if (window.attachEvent) { 
window.attachEvent("onload", function() { 
var sfEls = (parentId==null)?document.getElementsByTagName(tag):document.getElementById(parentId).getElementsByTagName(tag); 
type(sfEls); 
}); 
} 
} 
sfHover = function(sfEls) { 
for (var i=0; i < sfEls.length; i++) { 
sfEls[i].onmouseover=function() { 
this.className+=" iptHover"; 
} 
sfEls[i].onmouseout=function() { 
this.className=this.className.replace(new RegExp(" iptHover\\b"), ""); 
} 
} 
} 
sfFocus = function(sfEls) { 
for (var i=0; i < sfEls.length; i++) { 
sfEls[i].onfocus=function() { 
this.className+=" iptFocus"; 
} 
sfEls[i].onblur=function() { 
this.className=this.className.replace(new RegExp(" iptFocus\\b"), ""); 
} 
} 
}
</script>
<style type="text/css">
textarea{
border:1px solid #BBE1F1;
width:250px;
height:80px;
}
 .iptHover,input:hover,textarea:hover{
border:1px solid #77C2E3;
}
.iptFocus,input:focus,textarea:focus{
border:1px solid #77C2E3;
background-color:#EFF7FF;
}
</style>
<input type="text" name="textfield" /><br />
<textarea name="textarea"></textarea>
<script type="text/javascript">
suckerfish(sfHover, "input");
suckerfish(sfFocus, "input");
suckerfish(sfHover, "textarea");
suckerfish(sfFocus, "textarea");
</script>

希望本文所述对大家的javascript程序设计有所帮助。

Javascript 相关文章推荐
用javascript实现的支持lrc歌词的播放器
May 17 Javascript
浅谈window对象的scrollBy()方法
Jul 15 Javascript
javascript同步服务器时间和同步倒计时小技巧
Sep 24 Javascript
简单介绍JavaScript数据类型之隐式类型转换
Dec 28 Javascript
浅谈JS原型对象和原型链
Mar 02 Javascript
js实现表单及时验证功能 用户信息立即验证
Sep 13 Javascript
Vue.js分页组件实现:diVuePagination的使用详解
Jan 10 Javascript
JavaScript基础心法 深浅拷贝(浅拷贝和深拷贝)
Mar 05 Javascript
浅谈如何通过node.js对数据进行MD5加密
May 16 Javascript
JavaScript设计模式之装饰者模式定义与应用示例
Jul 25 Javascript
Vuex 使用 v-model 配合 state的方法
Nov 13 Javascript
js HTML DOM EventListener功能与用法实例分析
Apr 27 Javascript
IE7浏览器窗口大小改变事件执行多次bug及IE6/IE7/IE8下resize问题
Aug 21 #Javascript
jQuery+html5+css3实现圆角无刷新表单带输入验证功能代码
Aug 21 #Javascript
jquery结婚电子请柬特效源码分享
Aug 21 #Javascript
js实现不提交表单获取单选按钮值的方法
Aug 21 #Javascript
JavaScript实现将数组数据添加到Select下拉框的方法
Aug 21 #Javascript
情人节单身的我是如何在敲完代码之后收到12束玫瑰的(javascript)
Aug 21 #Javascript
jquery带翻页动画的电子杂志代码分享
Aug 21 #Javascript
You might like
使用eAccelerator加密PHP程序
2008/10/03 PHP
PHP中将ip地址转成十进制数的两种实用方法
2013/08/15 PHP
php利用curl抓取新浪微博内容示例
2014/04/27 PHP
php格式化日期实例分析
2014/11/12 PHP
PHP数组和explode函数示例总结
2015/05/08 PHP
js图片自动切换效果处理代码
2013/05/07 Javascript
js清理Word格式示例代码
2014/02/13 Javascript
JavaScript编程中window的location与history对象详解
2015/10/26 Javascript
jQuery密码强度检测插件passwordStrength用法实例分析
2015/10/30 Javascript
整理Javascript事件响应学习笔记
2015/12/02 Javascript
js数组常用操作方法小结(增加,删除,合并,分割等)
2016/08/02 Javascript
nodeJs链接Mysql做增删改查的简单操作
2017/02/04 NodeJs
jQuery轻松实现无缝轮播效果
2017/03/22 jQuery
JavaScript使用atan2来绘制箭头和曲线的实例
2017/09/14 Javascript
微信小程序实现的贪吃蛇游戏【附源码下载】
2018/01/03 Javascript
详解ES6中的代理模式——Proxy
2018/01/08 Javascript
详解webpack-dev-server 设置反向代理解决跨域问题
2018/04/18 Javascript
详解Vue内部怎样处理props选项的多种写法
2018/11/06 Javascript
JavaScript工具库之Lodash详解
2019/06/15 Javascript
详解JavaScript类型判断的四种方法
2020/10/21 Javascript
动态实现element ui的el-table某列数据不同样式的示例
2021/01/22 Javascript
[03:52]显微镜下的DOTA2第三期——英雄在无聊的时候干什么
2014/06/20 DOTA
Python中用于返回绝对值的abs()方法
2015/05/14 Python
Python数据结构与算法之二叉树结构定义与遍历方法详解
2017/12/12 Python
用Python实现大文本文件切割的方法
2019/01/12 Python
python中实现控制小数点位数的方法
2019/01/24 Python
Python下简易的单例模式详解
2019/04/08 Python
django admin 根据choice字段选择的不同来显示不同的页面方式
2020/05/13 Python
css3 transform及原生js实现鼠标拖动3D立方体旋转
2016/06/20 HTML / CSS
HTML5中的nav标签学习笔记
2016/06/24 HTML / CSS
教师网络培训感言
2014/03/09 职场文书
团日活动总结模板
2014/06/25 职场文书
教师工作自我鉴定范文
2014/09/14 职场文书
医院科室评语
2015/01/04 职场文书
勇敢的心观后感
2015/06/09 职场文书
jquery插件实现搜索历史
2021/04/24 jQuery