text box loses focus event, gets focus event
OnBlur: This event occurs when the input focus is lost
onfocus: When the input gets focus, the file is generated
Onchange: When the literal value changes, the event is generated
onselect: When the text is highlighted, the file is generated
Onpropertychange occurs when the property changes
paste KeyUp onchange and so on, the most sensitive
First of all, JavaScript is written directly on the input
Copy Code code as follows:
<input name= "Pwuser" type= "text" id= "Pwuser" class= "input" value= "real Estate account" onblur= "if (this.value== ') this.value= ' real estate Account Number '; "onfocus=" if (this.value== ' real estate account ') this.value= '; "/>
<input name= "pwpwd" type= "password" class= "input1" "value=" "Hu" "onblur=" if (this.value== ') this.value= ' Hu Jintao '; Onfocus= "if (this.value== ') this.value= ';" >
jquery Implementation Method
For the element focus event, we can use the focus function of jquery (), Blur ().
Focus (): used in the same way as onfocus in JavaScript, when it is focused.
Such as:
Copy Code code as follows:
$ ("P"). focus (); or $ ("P"). Focus (FN)
Blur (): Use when losing focus, same as onblur.
Such as:
Copy Code code as follows:
$ ("P"). blur (); or $ ("P"). blur (FN)
Instance
Copy Code code as follows:
<form>
<label for= "Searchkey" id= "Lbsearch" > Search god Horse? </label> here the label is overlaid on the text box to better control the style
<input id= "Searchkey" type= "text"/>
<input type= "Submit" value= "Search"/>
</form>
jquery Code
Copy Code code as follows:
$ (function () {
$ (' #searchKey '). focus (function () {
$ (' #lbSearch '). Text (');
});
$ (' #searchKey '). blur (function () {
var str = $ (this). Val ();
str = $.trim (str);
if (str = = ")
$ (' #lbSearch '). Text (' Search God horse? ');
});
})
Well, that's pretty good.
The following is a simple example:
Copy Code code as follows:
<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">
<meta http-equiv=" Content-type " Content= "text/html; charset=gb2312 "/>
<title> Untitled document </title>
<script>
Function tt () {
Var i=document.form1.text1.value;
if (i.length>=6)
document.getElementById ("S1"). innerhtml= "User name cannot be greater than 6 bits";
Else
document.getElementById ("S1"). innerhtml= "";
}
Function A () {
var j=document.form1.text2.value;
if (j.length>=6)
document.getElementById ("S2"). innerhtml= password cannot be greater than 6-bit
Else
document.getElementById ("S2"). innerhtml= "";
}
</script>
<body>
<form name= "Form1" >
User name: <input type= "Text" Id= "Text1" value= "Please enter the username" onfocus= "JavascripT:document.form1.text1.value= ' "onblur=" tt () "/>
<span id=" S1 "></span><br/>
Password:< Input type= "text" id= "Text2" value= "Please enter password" onfocus= "javascript:document.form1.text2.value=" "onblur=" A () "/>
<span id= "s2" ></span><br/>
<input type= "button" id= "button" value= "Login"/>
</FORM&G T
</body>
First: HTML5
HTML5 adds several new attributes to the form text box, such as Email,tel,number,time,required,autofocus,placeholder, which give a dramatic effect to the form's effects.
where placeholder is one of them, it can complete the text box to get focus and lose focus at the same time. The value of input must be guaranteed to be null, and the content of placeholder is what we see on the page.
The
code is as follows:
Copy Code code as follows:
<input type= "text" value= "placeholder=" Please enter the content/>
the second: JQuery
principle: Make the Val value of a form equal to its title value.
The
code is as follows:
Copy Code code as follows:
<input type= "text" value= "title=" Please enter the content/>
Copy Code code as follows:
<script type= "Text/javascript" >
$ (function () {
var $input = $ ("input");
$input. each (function () {
var $title = $ (this). attr ("title");
$ (this). Val ($title);
$ (this). focus (function () {
if ($ (this). val () = = $title) {
$ (this). Val (');
}
})
. blur (function () {
if ($ (this). val () = = "") {
$ (this). Val ($title);
}
});
});
});
</script>
text box gets focus, loses focus calls JavaScript
Copy Code code as follows:
<%@ Page language= "VB" codefile= "Focus.aspx.vb" inherits= "Focus"%> br><! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">
<title> Untitled page &l t;/title>
<script language= "javascript" >
function Text1_onmouseover (it)
{
It.focus ();
It.select ();
it.style.backgroundcolor= "Red";
}
Function Text1_onmouseout (it)
{
It.onblur;
it.style.backgroundcolor= "White";
}
</script>
<body>
<form id= "Form1" runat= "Server" >
< div>
<asp:textbox id= "TextBox1 onmouseover=" return Text1_onmouseover (this); "Onblur=" Text1_onmouseout ( This) "runat=" Server ></asp:TextBox>
</div>
</form>
</body>Br>
