你的位置:首页 > Java教程

[Java教程]jQuery实现textarea文本框带有半透明文本提示效果


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/