JavaScript实现为input与textarea自定义hover,focus效果的方法
作者:企鹅 时间:2024-04-10 11:01:18
本文实例讲述了JavaScript实现为input与textarea自定义hover,focus效果的方法。分享给大家供大家参考。具体如下:
这里演示JavaScript为input输入框和textarea文本框自定义hover,focus效果,hover也就是鼠标放上去之后的效果,focus是鼠标焦点问题,要实现 这种效果,需要JS来配合,这个例子就是很不错的,它把网页上输入框和文本框都加入了鼠标悬停和鼠标焦点效果。
运行效果截图如下:
在线演示地址如下:
http://demo.aspxhome.com/js/2015/js-input-textarea-hover-focus-style-codes/
具体代码如下:
<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,input,textarea,hover,focus
0
投稿
猜你喜欢
pyqt5 获取显示器的分辨率的方法
2023-10-25 09:51:36
火车票抢票python代码公开揭秘!
2021-06-16 18:34:29
python DES加密与解密及hex输出和bs64格式输出的实现代码
2023-03-07 11:07:50
python调用matplotlib模块绘制柱状图
2024-01-02 04:35:16
call在Python中改进数列的实例讲解
2021-10-12 17:17:20
Django路由层如何获取正确的url
2022-02-13 17:30:08
对pandas写入读取h5文件的方法详解
2021-01-10 09:11:18
js+html5实现半透明遮罩层弹框效果
2024-05-08 09:33:09
Python完全识别验证码自动登录实例详解
2023-12-17 03:58:14
Python爬虫动态ip代理防止被封的方法
2022-01-24 00:15:30
python写入中英文字符串到文件的方法
2022-11-21 23:11:03
pycharm使用技巧之自动调整代码格式总结
2021-08-28 08:13:18
Python实现向好友发送微信消息
2021-11-11 18:33:02
MySQL基础之MySQL 5.7 新增配置
2024-01-15 08:19:02
Win10用vscode打开anaconda环境中的python出错问题的解决
2023-04-21 09:21:21
编写自定义的Django模板加载器的简单示例
2022-07-02 20:06:44
sql语句中临时表使用实例详解
2024-01-15 22:39:11
Oracle 添加用户并赋权,修改密码,解锁,删除用户的方法
2009-10-14 11:37:00
JS小游戏之仙剑翻牌源码详解
2024-04-17 09:42:04
Python import用法以及与from...import的区别
2021-06-13 14:23:51