如图:
如何实现图中效果:
1.在文本框中给出提示
2.当点击输入时,提示消失
3.当点击文本框,但未输入数据,失去焦点时仍给出提示.
实现过程如下:
1.一个span和一个文本框
2.设置span的文本内容为提示内容
3.设置文本框的的样式和事件.
主要就是设置文本框的位置,设置绝对定位,定位在span的上面,然后设置文本框的背景颜色为transparent即可.
具体代码如下:
<html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>无标题页</title> <style type="text/css"> #txt { position:absolute; top:10px; left:10px; background-color:Transparent; z-index:100; } #txt2 { position:absolute; top:35px; left:10px; background-color:Transparent; } .span1 { color:Silver; left:10px; } .span2 { color:White; left:10px; } </style> </head> <body style="margin:10px"> <span class="span1" id='sp'> 姓名: </span> <input type="text" id='txt' /> <br /> <span class="span1" id='sp2'> 密码: </span> <input type="text" id='txt2' /> <script type="text/javascript"> document.getElementById("txt").onclick=function(){ document.getElementById("sp").className="span2"; }; document.getElementById("txt2").onclick=function(){ document.getElementById("sp2").className="span2"; }; document.getElementById("txt").onblur=function(){ if(window.event.srcElement.value==''){ document.getElementById("sp").className="span1"; } }; document.getElementById("txt2").onblur=function(){ if(window.event.srcElement.value==''){ document.getElementById("sp2").className="span1"; } }; </script> </body> </html>