本篇文章主要是對文本框水印提示效果的簡單實現代碼進行了介紹，需要的朋友可以過來參考下，希望對大家有所幫助
代碼如下: <!doctype html> <html> <head> <title></title> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"></script> <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:red;z-index:10;padding:10px; } </style> <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> 留言板<br /> <textarea id="txtNote" style="width: 600px; height: 400px;"></textarea> <div id="divTips"> 親，歡迎訪問，有什麼說的就寫下來吧!!<br /> (在下面的框框中留下您的name, 方便的話請留下您的聯系方式) </div><br /> <input type="text" value="姓名" /> <input type="text" value="手機/QQ/……" /> </body> </html>