javascript 輸入文本框時的友好提示

2019-11-21 00:55:04

字體：大中小

來源：轉載

供稿：網友

下面的代碼實現當用戶停留在text輸入框的時候提示輸入什么的提示信息，提高用戶粘合度。

在輸入內容前，顯示如圖1所示

圖1

當用戶名的文本框或得焦點時，效果如圖2所示

圖2

當密碼文本框或得焦點時，效果如圖3所示

圖3

演示的源代碼如下：

<!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> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>tt控件演示</title> <script language="javascript" > //tipTxt要顯示的內容，apos向右移動的距離，vpos向下移動的距離 function tip(tt,tipTxt,apos,vpos){ if(apos==undefined){ var apos=0; } if(vpos==undefined){ var vpos=0; } var dads = document.all.tipDiv.style; dads.display="block"; var th = tt; var ttop = tt.offsetTop-tt.clientHeight+vpos; //TT控件的定位點高 var thei = 20; //TT控件本身的高 var tleft = tt.offsetLeft; var tleft = tt.offsetLeft+tt.offsetWidth+apos; var twidth=100; var ttyp = tt.type; while (tt = tt.offsetParent){ ttop+=tt.offsetTop; tleft+=tt.offsetLeft; } dads.top = ttop+thei+6; dads.left = tleft; dads.width =twidth; document.all.taemTip.innerHTML="<font color='red'>"+tipTxt+"</font>"; } function notTip(){ var dads = document.all.tipDiv.style; dads.display="none"; } </script> </head> <body> <form action="" method="get"> <blockquote> <blockquote> <p align="center">   【提示控件演示】 用戶名： <input name="dd" onBlur="notTip()" type="text" onfocus="tip(this,'可輸入用戶名或郵箱')"/><br>    密碼： <input name="dd" onBlur="notTip()" type="text" onfocus="tip(this,'請輸入密碼')"/> <br> </p> </blockquote> </blockquote> </form> <div   class="iwvjtn8m0"   id='tipDiv' style='position:absolute;z-index:1000;display:none;width:50;heiht:40'> <table width="100%" border="0" cellpadding="4" cellspacing="1"> <tr > <td width="100%" height="25" ><div   class="iwvjtn8m0"   id="taemTip" style="background:#CFC"></div></td> </tr> </table> </div> </body> </html>

[Ctrl+A 全選注:如需引入外部Js需刷新才能執行]

上一篇：jValidate 基于jQuery的表單驗證插件

下一篇：勾選時激活input 否則禁用的javascript代碼