Javascript--如何实现水印效果

如图:

image

如何实现图中效果:

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>
posted @ 2009-12-08 21:23  Localhost  阅读(958)  评论(0)  编辑  收藏  举报