JS method to clear the text box content and trigger js when the text box is restored and the mouse leaves the text box

JS method to clear the text box content and trigger js when the text box is restored and the mouse leaves the text box_javascript skills

WBOY

Release： 2016-05-16 15:20:42

Original

1431 people have browsed it

The text boxes that need to be filled in on multiple websites will give a default prompt language by default. When the mouse clicks on this text box, the default text inside can be cleared. When the entered text is deleted and the focus leaves the text box Then write the default text into the text box.

The code is as follows:

<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.jb51.net/" />
<title>点击文本框清除默认值</title>
<script type="text/javascript"> 
window.onload=function()
{
var username=document.getElementById("username");
username.onclick=function()
{
if(username.value=="请输入您的姓名")
{
username.value="";
this.focus();
}
}
username.onblur=function()
{
if(username.value=="")
{
username.value="请输入您的姓名";
}
}
}
</script>
</head>
<body>
<input type="text" value="请输入您的姓名" id="username" />
</body>
</html>

Copy after login

The above code realizes our requirements. When the text box is clicked, the content in the text box can be cleared. If no content is entered in the text box, when the mouse focus leaves the text box at this time, the value of the text box will be restored. to the default state. However, if the password box is a bit troublesome because the password box is not displayed in clear text, the solution can be found in the JavaScript implementation of the prompt when the input box (password box) appears.

How to trigger js when the mouse leaves the text box

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm1.aspx.cs" Inherits="textBox.WebForm1" %> 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head runat="server"> 
<title></title> 
<script type="text/javascript"> 
function validate() { 
var name = document.getElementById("txtName"); 
if (name.value == 2) { 
alert("你必须不是二!"); 
name.focus(); 
return false; 
} 
return true; 
} 
</script> 
</head> 
<body> 
<form id="form1" runat="server"> 
<div> 
<asp:TextBox ID="txtName" onblur="validate();" runat="server" /> 
</div> 
</form> 
</body> 
</html>

Copy after login