jQuery鼠标点击文本框文字消失离开还原

发布时间：2018-09-10 14:54:35 所属栏目：PHP教程来源：站长网

导读：前段时间，烈火发表了《CSS的搜索框，点击文字消失，鼠标离开还原》的文章，这款效果是烈火在一个国外网站发现的，这里主要是实现了CSS效果，当然在input中使用了脚本，纯CSS是不可能实现这种效果的哦！今天，小编在后台看到一位站长朋友的评论，他用jque

　　前段时间，烈火发表了《CSS的搜索框，点击文字消失，鼠标离开还原》的文章，这款效果是烈火在一个国外网站发现的，这里主要是实现了CSS效果，当然在input中使用了脚本，纯CSS是不可能实现这种效果的哦！

　　今天，小编在后台看到一位站长朋友的评论，他用jquery实现了鼠标点击文本框文字消失离开还原的效果，现在把这篇文章转过来，供大家学习。

　　为解决一些网页特效运行后不能显示效果（例如：jQuery则需要刷新）问题，烈火特别新增网页版演示

　　网页演示：猛击此处

　　运行演示：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" c /> <title>点击文本框，提示说明字消失！</title> <script type="text/javascript" src="http://www.veryhuo.com/uploads/common/js/jquery-1.4.2.min.js"></script> </head> <body> <script> $(document).ready(function(){ $("TEXTAREA,input[focucmsg]") .each (function(){ $(this).val($(this).attr("focucmsg")); $(this).val($(this).attr("focucmsg")).css("color","#979393"); $(this).focus(function(){ if($(this).val() == $(this).attr("focucmsg")) { $(this).val(''); $(this).val('').css("color","#6b6969"); } }); $(this).blur(function(){ if(!$(this).val()){ $(this).val($(this).attr("focucmsg")); $(this).val($(this).attr("focucmsg")).css("color","#979393"); } }); }); }); </script> <input name="" type="text" focucmsg="请输入关键字...？" /> <textarea style="width:150px; height:50px;" name="" cols="" rows="" focucmsg="把自己的心情写上来吧？"> </textarea> </body> </html> <br /><center>如不能显示效果，请按Ctrl+F5刷新本页，更多网页代码：<a href='http://www.veryhuo.com/' target='_blank'>http://www.veryhuo.com/</a></center>
提示：可修改后代码再运行!

（编辑：温州站长网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!

在PHP中运用随机数的三	PHP读取汉字点阵信息
PHP应用程序加快探索之	给PHP管理小型的邮件列