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 相关文章推荐
js替换字符串的所有示例代码
Jul 23 Javascript
IE浏览器IFrame对象内存不释放问题解决方法
Aug 22 Javascript
javascript比较两个日期的先后示例代码
Dec 31 Javascript
最新最热最实用的15个jQuery插件汇总
Jul 05 Javascript
学习javascript面向对象 实例讲解面向对象选项卡
Jan 04 Javascript
详解JS中定时器setInterval和setTImeout的this指向问题
Jan 06 Javascript
浅谈键盘上回车按钮的js触发事件
Feb 13 Javascript
大白话讲解JavaScript的Promise
Apr 06 Javascript
AngularJS实现tab选项卡的方法详解
Jul 05 Javascript
JS实现滑动拼图验证功能完整示例
Mar 29 Javascript
Vue过滤器(filter)实现及应用场景详解
Jun 15 Vue.js
javascript对象3个属性特征
Nov 17 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
php中数组首字符过滤功能代码
2012/07/31 PHP
php对关联数组循环遍历的实现方法
2015/03/13 PHP
给WordPress的编辑后台添加提示框的代码实例分享
2015/12/25 PHP
关于php支持的协议与封装协议总结(推荐)
2017/11/17 PHP
PHP实现链表的定义与反转功能示例
2018/06/09 PHP
PHP大文件及断点续传下载实现代码
2020/08/18 PHP
查询绑定数据岛的表格中的文本并修改显示方式的js代码
2009/12/15 Javascript
javascript 触发HTML元素绑定的函数
2010/09/11 Javascript
jQuery 名称冲突的解决方法
2011/04/08 Javascript
NodeJS学习笔记之Connect中间件应用实例
2015/01/27 NodeJs
jQuery内部原理和实现方式浅析
2015/02/03 Javascript
JQuery中模拟image的ajaxPrefilter与ajaxTransport处理
2015/06/19 Javascript
jQuery的end()方法使用详解
2015/07/15 Javascript
C++中的string类的用法小结
2015/08/07 Javascript
学习Javascript面向对象编程之封装
2016/02/23 Javascript
Node.js v8.0.0正式发布!看看带来了哪些主要新特性
2017/06/02 Javascript
实例学习JavaScript读取和写入cookie
2018/01/29 Javascript
你点的 ES6一些小技巧,请查收
2018/04/25 Javascript
VUE Error: getaddrinfo ENOTFOUND localhost
2018/05/03 Javascript
详解Vue单元测试case写法
2018/05/24 Javascript
JS中的函数与对象的创建方式
2019/05/12 Javascript
使用vue for时为什么要key【推荐】
2019/07/11 Javascript
vue的滚动条插件实现代码
2019/09/07 Javascript
vue中使用vue-pdf的方法详解
2020/09/05 Javascript
vue实现div可拖动位置也可改变盒子大小的原理
2020/09/16 Javascript
vue打开新窗口并实现传参的图文实例
2021/03/04 Vue.js
对于Python中RawString的理解介绍
2016/07/07 Python
利用python模拟sql语句对员工表格进行增删改查
2017/07/05 Python
Python引用类型和值类型的区别与使用解析
2017/10/17 Python
python中的随机函数random的用法示例
2018/01/27 Python
3分钟学会一个Python小技巧
2018/11/23 Python
CSS3的RGBA中关于整数和百分比值的转换
2015/08/04 HTML / CSS
产品陈列协议书(标准版)
2014/09/17 职场文书
导游词之西安骊山
2019/12/20 职场文书
Javascript之datagrid查询详解
2021/09/15 Javascript
铁拳制作人赞《铁拳7》老头环Mod:制作精良 但别弄了
2022/04/03 其他游戏