javascript和css来实现textbox水印效果代码,Js代码库,德仔网

代码语言
代码分类
【Js】 javascript和css来实现textbox水印效果
作者:amandag / 发布于2016/9/19/ 936
<style type="text/css">  
        .WaterMarkedTextBox  
        {  
            height: 16px;  
            width: 168px;  
            padding: 2px 2 2 2px;  
            border: 1px solid #BEBEBE;  
            background-color: #F0F8FF;  
            color: gray;  
            font-size: 8pt;  
            text-align: center;  
        }  
        .WaterMarkedTextBoxPSW  
        {  
            background-position: center;  
            height: 16px;  
            width: 168px;  
            padding: 2px 2 2 2px;  
            border: 1px solid #BEBEBE;  
            background-color: #F0F8FF;  
            color: white;  
            vertical-align: middle;  
            text-align: right;  
            background-image: url(Images/psw_wMark.png);  
            background-repeat: no-repeat;  
        }  
        .NormalTextBox  
        {  
            height: 16px;  
            width: 168px;  
        }  
    </style>  




<script language="javascript" type="text/javascript">  
       function Focus(objname, waterMarkText) {  
           obj = document.getElementById(objname);  
           if (obj.value == waterMarkText) {  
               obj.value = "";  
               obj.className = "NormalTextBox";  
               if (obj.value == "User ID" || obj.value == "" || obj.value == null) {  
                   obj.style.color = "black";  
               }  
           }  
       }  
       function Blur(objname, waterMarkText) {  
           obj = document.getElementById(objname);  
           if (obj.value == "") {  
               obj.value = waterMarkText;  
               if (objname != "txtPwd") {  
                   obj.className = "WaterMarkedTextBox";  
               }  
               else {  
                   obj.className = "WaterMarkedTextBoxPSW";  
               }  
           }  
           else {  
               obj.className = "NormalTextBox";  
           }  
  
           if (obj.value == "User ID" || obj.value == "" || obj.value == null) {  
               obj.style.color = "gray";  
           }  
       }  
   </script>   

[html] view plain copy
<body>  
    <form id="form1" runat="server">  
    <div>  
        <h3>  
            Watermark Textbox using JavaScript and CSS</h3>  
    </div>  
    <table>  
        <tr>  
            <td>  
                User Id  
            </td>  
            <td>  
                <asp:TextBox ID="txtUserId" runat="server"   
        onfocus="Focus(this.id,'User ID')"  
                    onblur="Blur(this.id,'User ID')"   
            Width="126px" CssClass="WaterMarkedTextBox">User ID</asp:TextBox>  
            </td>  
        </tr>  
        <tr>  
            <td>  
                Password  
            </td>  
            <td>  
                <asp:TextBox ID="txtPwd" TextMode="Password"   
        runat="server" onfocus="Focus(this.id,'')"  
                    onblur="Blur(this.id,'')" Width="126px"   
            CssClass="WaterMarkedTextBoxPSW" />  
            </td>  
        </tr>  
        <tr>  
            <td>  
            </td>  
            <td>  
                <asp:Button ID="Button1" runat="server" Text="Submit" />  
            </td>  
        </tr>  
    </table>  
    </form>  
</body>
试试其它关键字
同语言下
可能有用的
amandag贡献的其它代码(12)