表单JS弹出填写提示

HTML

< form id = " form1 " runat = " server " >
< div >
< div style = " margin-top:100px " >
< asp:TextBox ID = " TextBox1 " runat = " server " HintTitle = " 增加的内容信息标题 " HintInfo = " 控制在100个字数内，标题文本尽量不要太长。 " ></ asp:TextBox ></ div >
</ div >
</ form >

页面中的样式

Style

< style type = " text/css " >
.focus
{
border: 1px solid #FC0 ! important;
background: url(Admin / Images / focus_bg.jpg) repeat - x ! important;
color: #00F ! important;
}
/* 提示文字样式 */
#HintMsg
{
width: 271px;
position: absolute;
display: none;
}
#HintMsg .HintTop
{
height: 9px;
background: url(Admin / Images / hintbg1.gif) no - repeat;
overflow: hidden;
}
#HintMsg .HintInfo
{
padding: 0 5px;
border - left: 1px solid # 000 ;
border - right: 1px solid # 000 ;
background: #FFFFE1;
line - height: 1 .5em;
}
#HintMsg .HintInfo b
{
display: block;
margin - bottom: 6px;
padding - left: 15px;
background: url(Admin / Images / hint.gif) left center no - repeat;
height: 13px;
line - height: 16px;
}
#HintMsg .HintInfo b span
{
display: block;
float : right;
text - indent: - 9999px;
background: url(Admin / Images / close.gif) no - repeat;
width: 12px;
height: 12px;
cursor: pointer;
}
#HintMsg .HintFooter
{
height: 22px;
background: url(Admin / Images / hintbg2.gif) no - repeat;
}
</ style >

关键JS

$(function() {
$( " .input,.login_input,.textarea " ).focus(function() {
$( this ).addClass( " focus " );
}).blur(function() {
$( this ).removeClass( " focus " );
});

// 输入框提示,获取拥有HintTitle,HintInfo属性的对象
$( " [HintTitle],[HintInfo] " ).focus(function( event ) {
$( " * " ).stop(); // 停止所有正在运行的动画
$( " #HintMsg " ).remove(); // 先清除，防止重复出错
var HintHtml = " <ul id=\"HintMsg\"><li class=\"HintTop\"></li><li class=\"HintInfo\"><b> " + $( this ).attr( " HintTitle " ) + " </b> " + $( this ).attr( " HintInfo " ) + " </li><li class=\"HintFooter\"></li></ul> " ; // 设置显示的内容
var offset = $( this ).offset(); // 取得事件对象的位置
$( " body " ).append(HintHtml); // 添加节点
$( " #HintMsg " ).fadeTo( 0 , 0.85 ); // 对象的透明度
var HintHeight = $( " #HintMsg " ).height(); // 取得容器高度
$( " #HintMsg " ).css({ " top " : offset.top - HintHeight + " px " , " left " : offset.left + " px " }).fadeIn( 500 );
}).blur(function( event ) {
$( " #HintMsg " ).remove(); // 删除UL
});
});

效果图：

 

以上内容来子一个下载的网站,具体的名字忘记了....仅作参考

转载于:https://www.cnblogs.com/zzjjgg/archive/2011/04/16/2018093.html