Search This Blog

Friday, September 16, 2011

AS per twitter Focus -in -out and watermark through javascript



 <style type="text/css">
      
        .tb
        {
           background-image:url(textbox_signup.png);
            background-repeat:no-repeat;
            background-position:center;
            width:304px;
            height:38px;
            border:0px;
            background-color:transparent;
            display:block;
            clear:both;
            padding-left:10px
           
        }
       .watermarkOn
        {
         text-align:left;
         color: #000000;
         font-size:medium;
         font-style:normal;
        
        font-family: Verdana,Arial,Helvetica,sans-serif;
        font-size: 13px;
      
       padding-left:10px
        }
       
     
    style>


     <%----%>
  <%----%>
    <script src="js/jquery/jquery-1.6.3.min.js" type="text/javascript">script>

 <script type="text/javascript">
     $(document).ready(function () {


         //User ID Focus -in -out

         $("#txtuserid").focusin(function () {
             $("#txtuserid").css({ 'border-color': 'rgba(82, 168, 236, 0.75)', 'box-shadow': ' 0 0 8px rgba(82, 168, 236, 0.5)', 'color': '#747170'
             });
         });
         $("#txtuserid").focusout(function () {
             $("#txtuserid").css({ 'box-shadow': 'none', 'color': '#000000' });
         });


         // Password Focus -in -out

         $("#txtpassword").focusin(function () {
             if ($(this).val() == "" || $(this).val() == "Password") {
                 document.getElementById('txtpassword').type = 'text';
             }
             else {
                 document.getElementById('txtpassword').type = 'password';
             };
             $("#txtpassword").css({ 'border-color': 'rgba(82, 168, 236, 0.75)', 'box-shadow': ' 0 0 8px rgba(82, 168, 236, 0.5)', 'color': '#747170' });
         });

         $("#txtpassword").focusout(function () {
             $("#txtpassword").css({ 'box-shadow': 'none', 'color': '#000000' });
         });


         //Username -Keypress -blur event*************************************************************

        


         //For User ID

         $("#txtuserid").keypress(function () {
              $(this).filter(function () {

                  return $(this).val() == "" || $(this).val() == "User Id"

             }).removeClass("watermarkOn").val("");

          }).addClass("watermarkOn").val("User Id");

         $("#txtuserid").blur(function () {
            $(this).filter(function () {
                 return $(this).val() == ""

             }).addClass("watermarkOn").val("User Id");

         });

         //For Password

         $("#txtpassword").keypress(function () {
             document.getElementById('txtpassword').type = 'password';
             $(this).filter(function () {

                 return $(this).val() == "" || $(this).val() == "Password"

             }).removeClass("watermarkOn").val("");

         }).addClass("watermarkOn").val("Password");

         $("#txtpassword").blur(function () {
             if ($(this).val() == "") {
                 document.getElementById('txtpassword').type = 'text';
             };
             $(this).filter(function () {
                 return $(this).val() == ""

             }).addClass("watermarkOn").val("Password");

         });
        
     });
script>
*------------------------ in aspx-----------------------------
       <asp:TextBox ID="txtuserid" runat="server" Text="User Id" class="loginbox">asp:TextBox>
                    
<asp:TextBox ID="txtpassword" runat="server" Text="Password" class="loginbox" >asp:TextBox>

No comments: