js javascript 表单tips效果,文本框弹出提示框效果
带箭头效果与代码:http://dl.iteye.com/upload/attachment/176325/e3e73593-647e-3a17-82b5-7043572f50ac.gif
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head> <title>Form field hints with CSS and JavaScript</title><style type="text/css">/* All form elements are within the definition list for this example */dl { font:normal 12px/15px Arial; position: relative; width: 350px;}dt { clear: both; float:left; width: 130px; padding: 4px 0 2px 0; text-align: left;}dd { float: left; width: 200px; margin: 0 0 8px 0; padding-left: 6px;}/* The hint to Hide and Show */.hint { display: none; position: absolute; right: -250px; width: 200px; margin-top: -4px; border: 1px solid #c93; padding: 10px 12px; /* to fix IE6, I can't just declare a background-color, I must do a bg image, too!So I'm duplicating the pointer.gif image, and positioning it so that it doesn't show up within the box */ background: #ffc url("http://www.cssrain.cn/demo/formfieldhints/pointer.gif") no-repeat -10px 5px;}/* The pointer image is hadded by using another span */.hint .hint-pointer { position: absolute; left: -10px; top: 5px; width: 10px; height: 19px; background: url("http://www.cssrain.cn/demo/formfieldhints/pointer.gif") left top no-repeat;}</style><script type="text/javascript">function addLoadEvent(func) {var oldonload = window.onload;if (typeof window.onload != 'function') { window.onload = func;} else { window.onload = function() { oldonload(); func(); }}}function prepareInputsForHints() { var inputs = document.getElementsByTagName("input"); for (var i=0; i<inputs.length; i++){// test to see if the hint span exists firstif (inputs.parentNode.getElementsByTagName("span")) { // the span exists!on focus, show the hint inputs.onfocus = function () { this.parentNode.getElementsByTagName("span").style.display = "inline"; } // when the cursor moves away from the field, hide the hint inputs.onblur = function () { this.parentNode.getElementsByTagName("span").style.display = "none"; }} } // repeat the same tests as above for selects var selects = document.getElementsByTagName("select"); for (var k=0; k<selects.length; k++){if (selects.parentNode.getElementsByTagName("span")) { selects.onfocus = function () { this.parentNode.getElementsByTagName("span").style.display = "inline"; } selects.onblur = function () { this.parentNode.getElementsByTagName("span").style.display = "none"; }} }}addLoadEvent(prepareInputsForHints);</script></head><body><p style="font:normal 12px/15px Arial;">Tab or click through the fields to reveal the hints.</p><dl> <dt><label for="firstname">First Name:</label> </dt> <dd><input name="firstname" id="firstname" type="text" /><span class="hint">This is the name your mama called you when you were little.<span class="hint-pointer"> </span></span> </dd> <dt><label for="lastname">Last Name:</label> </dt> <dd><input name="lastname" id="lastname" type="text" /><span class="hint">This is the name your sergeant called you when you went through bootcamp.<span class="hint-pointer"> </span></span> </dd> <dt><label for="email">Email:</label> </dt> <dd><input name="email" id="email" type="text" /><span class="hint">The thing with the @ symbol and the dot com at the end.<span class="hint-pointer"> </span></span> </dd> <dt><label for="year">Birth Year:</label></dt> <dd><select id="year" name="year"> <option value="">YYYY</option> <option value="1066">1066</option> <option value="1492">1492</option> <option value="1776">1776</option> <option value="1812">1812</option> <option value="1917">1917</option> <option value="1942">1942</option> <option value="1999">1999</option></select><span class="hint">Pick a famous year to be born in.<span class="hint-pointer"> </span></span> </dd> <dt><label for="username">Username:</label> </dt> <dd><input name="username" id="username" type="text" /><span class="hint">Between 4-12 characters.<span class="hint-pointer"> </span></span> </dd> <dt><label for="password">Password:</label> </dt> <dd><input name="password" id="password" type="password" /><span class="hint">Between 5-13 characters, but not 7.Never 7.<span class="hint-pointer"> </span></span> </dd> <dt class="button"> </dt> <dd class="button"><input type="submit" class="button" value="Submit" /> </dd></dl></body></html>
不带箭头效果与代码:
http://dl.iteye.com/upload/attachment/176327/3d24023b-67d6-3d4b-b909-cf2f0e695cb3.gif
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"><head><title></title><style type="text/css">*{margin:0px;padding:0px;font-size:12px;} input{ width:100px;height:20px;border:1px solid #ccc; }</style></head><body><script language="javascript">function tips(id,str){var l=document.getElementById(id).offsetLeft+120;var t=document.getElementById(id).offsetTop;document.getElementById("tips").innerHTML="提示："+str;document.getElementById("tips").style.left=l+"px";document.getElementById("tips").style.top=t+"px";document.getElementById("tips").style.display="";}function outtips(){ document.getElementById("tips").style.display='none';}</script><div id="tips" style="position:absolute;border:1px solid #ccc;padding:0px 3px;color:#f00;display:none;height:20px;line-height:20px;background:#fcfcfc"></div><br />姓名：<input type="text" id="username" /><br />密码：<input type="password" id="password" /></body></html>
黑色头发:http://heisetoufa.iteye.com/
页:
[1]