文本框水印提示效果的簡(jiǎn)單實(shí)現(xiàn)代碼
更新時(shí)間：2014年02月22日 09:26:58 作者：
本篇文章主要是對(duì)文本框水印提示效果的簡(jiǎn)單實(shí)現(xiàn)代碼進(jìn)行了介紹，需要的朋友可以過(guò)來(lái)參考下，希望對(duì)大家有所幫助
復(fù)制代碼 代碼如下:
<!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 () {
//置焦點(diǎn)時(shí)隱藏
$divTips.hide();
}).blur(function () {
//離開(kāi)時(shí)， 如果為空則顯示，否則隱藏. 然后定位
$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">
親，歡迎訪問(wèn)，有什么說(shuō)的就寫(xiě)下來(lái)吧!!<br />
(在下面的框框中留下您的name, 方便的話請(qǐng)留下您的聯(lián)系方式)
</div><br />
<input type="text" value="姓名" /> <input type="text" value="手機(jī)/QQ/……" />
</body>
</html>
相關(guān)文章
這篇文章主要為大家詳細(xì)介紹了jQuery實(shí)現(xiàn)呼吸輪播圖，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-10-10
基于Bootstrap和jQuery構(gòu)建前端分頁(yè)工具實(shí)例代碼
本文給大家介紹基于Bootstrap和jQuery構(gòu)建前端分頁(yè)工具實(shí)例代碼，包括前端分頁(yè)的優(yōu)缺點(diǎn)和解決辦法，對(duì)jquery bootstrap分頁(yè)知識(shí)感興趣的朋友一起通過(guò)本文學(xué)習(xí)吧2016-11-11
jQuery實(shí)現(xiàn)根據(jù)類型自動(dòng)顯示和隱藏表單
這篇文章主要給大家分享了jQuery實(shí)現(xiàn)根據(jù)類型自動(dòng)顯示和隱藏表單的代碼，非常的簡(jiǎn)單實(shí)用，僅僅10行代碼，推薦給大家，希望能給大家一些提示。2015-03-03
本篇文章主要介紹了jQuery tip提示插件的相關(guān)知識(shí)。具有很好的參考價(jià)值。下面跟著小編一起來(lái)看下吧2017-04-04
jquery表單驗(yàn)證插件validation使用方法詳解
這篇文章主要為大家詳細(xì)介紹了jquery表單驗(yàn)證插件validation使用方法，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-01-01
JQuery為textarea添加maxlength屬性并且兼容IE
textarea默認(rèn)不支持maxlength屬性，JQuery為textarea添加maxlength,并且兼容IE，具體實(shí)現(xiàn)祥看本文，希望可以幫助到你2013-04-04
jQuery.ajax實(shí)現(xiàn)根據(jù)不同的Content-Type做出不同的響應(yīng)
使用H5+ASP.NET General Handler開(kāi)發(fā)項(xiàng)目，使用ajax進(jìn)行前后端的通訊。有一個(gè)場(chǎng)景需求是根據(jù)服務(wù)器返回的不同數(shù)據(jù)類型，前端進(jìn)行不同的響應(yīng)，這里記錄下如何使用$.ajax實(shí)現(xiàn)該需求,需要的朋友可以參考下2016-11-11
這篇文章主要介紹了Jquery Ajax方法傳值到action的方法,需要的朋友可以參考下2014-05-05
本文主要介紹了使用jQuery快速高效制作網(wǎng)頁(yè)交互特效的方法，具有很好的參考價(jià)值，下面跟著小編一起來(lái)看下吧2017-02-02
這篇文章主要介紹了jQuery遍歷Table的具體實(shí)現(xiàn),需要的朋友可以參考下2014-04-04