jQuery實現textarea文本框帶有半透明文本提示效果:textarea文本框一般用於編輯大段的文本，比如編輯器或者簡單的留言回覆之類的功能，有的在textarea文本框的有預設的提示語言，下麵就介紹一下如何使用jQuery實現此功能。代碼如下:螞蟻部落留言板:螞蟻部落歡迎您以上代碼實現了我們...
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/
