给大家一个介绍一个实例,可以用在登陆框上,当鼠标点击输入框的时候,框内提示文字消失,效果如下:
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>建站学JS点击输入框,框内文字消失实例www.jzxue.com</title> <script type="text/javascript"> //得到焦点时触发事件 function OnFocusFun(element,elementvalue) { if(element.value==elementvalue) { element.value=""; element.style.color="#000"; } } //离开输入框时触发事件 function OnBlurFun(element,elementvalue) { if(element.value==""||element.value.replace(/\s/g,"")=="") { element.value=elementvalue; element.style.color="#999"; } } </script> </head> <body> <div>欢迎学习建站学点击<strong>输入框</strong>框内文字消失实例</div> <div> <span>账号:</span> <input type="text" value="请输入用户名" id="UserId" onfocus="OnFocusFun(this,'请输入用户名')" style="color:#999" onblur="OnBlurFun(this,'请输入用户名')"/> </div> <div> <span>密码:</span> <input type="text" value="请输入密码" id="Password" onfocus="OnFocusFun(this,'请输入密码')" onblur="OnBlurFun(this,'请输入密码')" style="color:#999" /> </div> </body> </html>
[ 提示:你可先修改部分代码,再按Ctrl+A 全部选择 ]
很不错的一款日期输入控件特效...