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 相关文章推荐
Web跨浏览器进程通信(Web跨域)
Apr 17 Javascript
JS控制网页动态生成任意行列数表格的方法
Mar 09 Javascript
详解jQuery中的元素的属性和相关操作
Aug 14 Javascript
原生js实现autocomplete插件
Apr 14 Javascript
Javascript表单特效之十大常用原理性样例代码大总结
Jul 12 Javascript
JavaScript暂停和继续定时器的实现方法
Jul 18 Javascript
vue.js实现表格合并示例代码
Nov 30 Javascript
JavaScript实现前端分页控件
Apr 19 Javascript
jQuery基于cookie实现换肤功能实例
Oct 14 jQuery
Promise扫盲贴
Jun 24 Javascript
vue+element项目中过滤输入框特殊字符小结
Aug 07 Javascript
vuex Module将 store 分割成模块的操作
Dec 07 Vue.js
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
PHP最常用的2种设计模式工厂模式和单例模式介绍
2012/08/14 PHP
YII框架中使用memcache的方法详解
2017/08/02 PHP
快速保存网页中所有图片的方法
2006/06/23 Javascript
用js生产批量批处理执行命令
2008/07/28 Javascript
Jquery基础之事件操作详解
2016/06/14 Javascript
基于JavaScript实现鼠标箭头移动图片跟着移动
2016/08/30 Javascript
Seajs是什么及sea.js 由来,特点以及优势
2016/10/13 Javascript
jQuery通过ajax快速批量提交表单数据
2016/10/25 Javascript
AngularJS+Bootstrap实现多文件上传与管理
2016/11/08 Javascript
JS声明式函数与赋值式函数实例分析
2016/12/13 Javascript
jquery插件bootstrapValidator表单验证详解
2016/12/15 Javascript
微信小程序调用摄像头隐藏式拍照功能
2018/08/22 Javascript
详解如何构建一个Angular6的第三方npm包
2018/09/07 Javascript
vue3使用vue-count-to组件的实现
2020/12/25 Vue.js
[02:23]2014DOTA2国际邀请赛中国战队回顾
2014/08/01 DOTA
[56:20]LGD vs VP Supermajor 败者组决赛 BO3 第三场 6.10
2018/07/04 DOTA
[47:45]DOTA2-DPC中国联赛 正赛 Phoenix vs Dragon BO3 第一场 2月26日
2021/03/11 DOTA
python实现的简单窗口倒计时界面实例
2015/05/05 Python
将Python代码打包为jar软件的简单方法
2015/08/04 Python
Python 3.x读写csv文件中数字的方法示例
2017/08/29 Python
Python实现找出数组中第2大数字的方法示例
2018/03/26 Python
在Pycharm中对代码进行注释和缩进的方法详解
2019/01/20 Python
关于Keras Dense层整理
2020/05/21 Python
python使用hdfs3模块对hdfs进行操作详解
2020/06/06 Python
tensorflow 2.0模式下训练的模型转成 tf1.x 版本的pb模型实例
2020/06/22 Python
Original Penguin英国官方网站:美国著名休闲时装品牌
2016/10/30 全球购物
沃达丰英国有限公司:Vodafone英国
2019/04/16 全球购物
linux面试题参考答案(9)
2016/01/29 面试题
社会学专业求职信
2014/02/24 职场文书
2014年两会学习心得体会
2014/03/17 职场文书
农村改厕实施方案
2014/03/22 职场文书
2014年学习厉行节约反对浪费思想汇报
2014/09/10 职场文书
忠犬八公的故事观后感
2015/06/05 职场文书
开学第一周值周总结
2015/07/16 职场文书
2019年亲子运动会口号
2019/10/11 职场文书
导游词之泉州崇武古城
2019/12/20 职场文书