When the mouse focuses on the email address text box, the text "Please enter email address" in the text box is cleared.
Reproduction image:
The code copy is as follows:
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Similar to the prompt effect of yahoo email login.aspx.cs" Inherits="Similar to the prompt effect of yahoo email login" %>
<!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 the address box
$("#address").focus(function () { //The address box gets the mouse focus
var txt_value = $(this).val(); //Get the value of the current text box
if (txt_value == "Please enter your email address") {
$(this).val(""); //If the conditions are met, clear the text box content
}
});
$("#address").blur(function () { //The address box loses mouse focus
var txt_value = $(this).val(); //Get the value of the current text box
if (txt_value == "") {
$(this).val("Please enter your email address"); //If the conditions are met, set the content
}
})
//Operate 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 the 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 the email password" /><br /><br />
<input type ="button" value ="Login" />
</div>
</form>
</body>
</html>