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入门教程(6) Window窗口对象
Jan 31 Javascript
JS 拼图游戏 面向对象,注释完整。
Jun 18 Javascript
获取URL地址中的文件名和参数的javascript代码
Sep 02 Javascript
如何阻止复制剪切和粘贴事件为了表单内容的安全
May 23 Javascript
javascritp添加url参数将参数加入到url中
Sep 25 Javascript
全面解析Bootstrap图片轮播效果
Dec 03 Javascript
bootstrap table实现单击单元格可编辑功能
Mar 28 Javascript
Vue2.0权限树组件实现代码
Aug 29 Javascript
原生js实现简单的焦点图效果实例
Dec 14 Javascript
vue使用v-if v-show页面闪烁,div闪现的解决方法
Oct 12 Javascript
js中比较两个对象是否相同的方法示例
Sep 02 Javascript
JavaScript实现瀑布流布局的3种方式
Dec 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
mysql下创建字段并设置主键的php代码
2010/05/16 PHP
PHP防止表单重复提交的几种常用方法汇总
2014/08/19 PHP
Netbeans 8.2将支持PHP7 更精彩
2016/06/13 PHP
PHP基于ICU扩展intl快速实现汉字转拼音及按拼音首字母分组排序的方法
2017/05/03 PHP
PHP排序算法之快速排序(Quick Sort)及其优化算法详解
2018/04/21 PHP
PHP实现微信提现(企业付款到零钱)
2019/08/01 PHP
aspx中利用js实现确认删除代码
2010/07/22 Javascript
jQuery Ajax使用 全解析
2010/12/15 Javascript
输入密码检测大写是否锁定js实现代码
2012/12/03 Javascript
document.createElement()用法及注意事项(ff下不兼容)
2013/03/13 Javascript
JS控制文本框textarea输入字数限制的方法
2013/06/17 Javascript
JS 如何获取radio选中后的值及不选择取radio的值
2013/10/28 Javascript
jquery.post用法示例代码
2014/01/03 Javascript
js动态切换图片的方法
2015/01/20 Javascript
快速获取/设置iframe内对象元素的几种js实现方法
2016/05/20 Javascript
jQuery插件扩展测试实例
2016/06/21 Javascript
JS留言功能的简单实现案例(推荐)
2016/06/23 Javascript
JS输出空格的简单实现方法
2016/09/08 Javascript
jQuery实现表格奇偶行显示不同背景色 就这么简单
2017/03/13 Javascript
bootstrap select下拉搜索插件使用方法详解
2017/11/23 Javascript
快速解决vue-cli不能初始化webpack模板的问题
2018/03/20 Javascript
从零开始搭建vue移动端项目到上线的步骤
2018/10/15 Javascript
vue使用代理解决请求跨域问题详解
2019/07/24 Javascript
vue父子组件通信的高级用法示例
2019/08/29 Javascript
JS实现斐波那契数列的五种方式(小结)
2020/09/09 Javascript
vue中如何自定义右键菜单详解
2020/12/08 Vue.js
Python中文分词实现方法(安装pymmseg)
2016/06/14 Python
Python模糊查询本地文件夹去除文件后缀的实例(7行代码)
2017/11/09 Python
详解Python判定IP地址合法性的三种方法
2018/03/06 Python
在linux下实现 python 监控usb设备信号
2019/07/03 Python
python3.6连接mysql数据库及增删改查操作详解
2020/02/10 Python
Python之京东商品秒杀的实现示例
2021/01/06 Python
用C或者C++语言实现SOCKET通信
2015/02/24 面试题
检察官就职演讲稿
2014/01/13 职场文书
职业生涯规划书结束语
2014/04/15 职场文书
计算机求职信
2014/07/02 职场文书