标签：
jQuery实现textarea文本框带有半透明文本提示效果:
textarea文本框一般用于编辑大段的文本，比如编辑器或者简单的留言回复之类的功能，有的在textarea文本框的有默认的提示语言，下面就介绍一下如何使用jQuery实现此功能。
代码如下:
<!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <meta name="author" content="http://www.softwhy.com/" /> <title>蚂蚁部落</title> <style type="text/css"> #divTips{ filter:alpha(opacity=30); /*IE滤镜，透明度50%*/ -moz-opacity:0.3; /*Firefox私有，透明度50%*/ opacity:0.3;/*其他，透明度50%*/ position:absolute; width:600px; height:400px; display:none; color:green; z-index:10; padding:10px; } #txtNote{ width:300px; height:100px; } </style> <script type="text/javascript" src="mytest/jQuery/jquery-1.8.3.js"></script> <script type="text/javascript"> $(function () { var $txtNote = $("#txtNote"); var $divTips = $("#divTips"); $txtNote.focus(function () { //置焦点时隐藏 $divTips.hide(); }).blur(function(){ $divTips.toggle($txtNote.val() == "").css({ "left": $txtNote.position().left, "top" : $txtNote.position().top }); }); $divTips.click(function () { $txtNote.focus(); }); $txtNote.blur(); }); </script> </head> <body> 留言板:<textarea id="txtNote"></textarea> <div id="divTips">蚂蚁部落欢迎您</div> </body> </html>
以上代码实现了我们的要求，原理和代码都比较简单，这里就不多介绍了，更多内容可以参阅相关阅读。
相关阅读:
1.focus事件可以参阅jQuery的focus事件一章节。
2.hide()函数可以参阅jQuery的hide()方法一章节。
3.toggle()函数可以参阅jQuery的toggle()方法一章节。
4.css()函数可以参阅jQuery的css()方法一章节。
5.position()函数可以参阅jQuery的offset()和position()用法详解一章节。
6.blur事件可以参阅 jQuery的blur事件一章节。
原文地址是:http://www.softwhy.com/forum.php?mod=viewthread&tid=12406
更多内容可以参阅:http://www.softwhy.com/jquery/
jQuery实现textarea文本框带有半透明文本提示效果
标签：
原文地址：http://www.cnblogs.com/xiaofinder/p/5140922.html
