Simple email sign in prompts look similar to yahoo mail

  • 2020-03-30 02:09:32
  • OfStack

When the mouse is focused on the email address text box, the text box "please enter email address" text is cleared.

Effect:
< img SRC = "border = 0 / / files.jb51.net/file_images/article/201402/201402261538091.gif? 2014126153850 ">


<%@ Page Language="C#" AutoEventWireup="true" CodeFile=" Similar to the yahoo Email login prompt effect .aspx.cs" Inherits=" Similar to the yahoo Email login prompt effect " %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
    <script type ="text/javascript" src ="Scripts/jquery-1.7.1.js"></script>
    <script type ="text/javascript" >
        $(function () {
            //Operate on the address box
            $("#address").focus(function () {        //The address box gets the mouse focus
                var txt_value = $(this).val();       //Gets the value of the current text box
                if (txt_value == " Please enter your email address ") {
                    $(this).val("");                 //If the condition is met, empty the text box contents
                }
            });
            $("#address").blur(function () {         //Address box loses mouse focus
                var txt_value = $(this).val();       //Gets the value of the current text box
                if (txt_value == "") {
                    $(this).val(" Please enter your email address ");      //If the condition is met, the content is set
                }
            })
            //Operate on the password box
            $("#password").focus(function () {
                var txt_value = $(this).val();
                if (txt_value == " Please enter your email password ") {
                    $(this).val("");
                }
            });
            $("#password").blur(function () {
                var txt_value = $(this).val();
                if (txt_value == "") {
                    $(this).val(" Please enter your email password ");
                }
            })
        });
    </script>
</head>
<body>
    <form id="form1" runat="server">
    <div>
    <input type ="text" id ="address" value =" Please enter your email address " /><br /><br />
        <input type ="text" id ="password" value =" Please enter your email password " /><br /><br />
        <input type ="button" value =" The login " />
    </div>
    </form>
</body>
</html>


Related articles: