Text Box loss focus event, get focus event
OnBlur: this event is generated when the input focus is lost.
OnFocus: this file is generated when the input gets the focus.
Onchange: this event is generated when the text value changes.
Onselect: this file is generated when the text is highlighted
Onpropertychange this event occurs when the property changes
The keyup onchange and so on are the most sensitive.
Let's look at the javascript directly written on the input.
Copy codeThe Code is as follows:
<Input name = "pwuser" type = "text" id = "pwuser" class = "input" value = "Real Estate Account" onBlur = "if (this. value = '') this. value = 'real estate account'; "onFocus =" if (this. value = 'real estate account') this. value = '';"/>
<Input name = "pwpwd" type = "password" class = "input1" value = "******" onBlur = "if (this. value = '') this. value = '******'; "onFocus =" if (this. value = '*******') this. value = '';">
Jquery Implementation Method
For element focus events, we can use jQuery's focus functions focus () and blur ().
Focus (): used to obtain the focus, which is the same as onfocus in javascript.
For example:
Copy codeThe Code is as follows:
$ ("P"). focus (); or $ ("p"). focus (fn)
Blur (): used when the focus is lost, just like onblur.
For example:
Copy codeThe Code is as follows:
$ ("P"). blur (); or $ ("p"). blur (fn)
Instance
Copy codeThe Code is as follows:
<Form>
<Label for = "searchKey" id = "lbSearch"> Search Shenma? </Label> here, the label overwrites the text box to better control the style.
<Input id = "searchKey" type = "text"/>
<Input type = "submit" value = "Search"/>
</Form>
Jquery code
Copy codeThe Code is 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? ');
});
})
Okay, pretty good.
The following is a simple example:
Copy codeThe Code is as follows:
<! 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>
<Meta http-equiv = "Content-Type" content = "text/html; charset = gb2312"/>
<Title> untitled document </title>
</Head>
<Script>
Function tt (){
Var I = document. form1.text1. value;
If (I. length> = 6)
Document. getElementById ("s1"). innerHTML = "the user name cannot exceed 6 characters ";
Else
Document. getElementById ("s1"). innerHTML = "";
}
Function (){
Var j = document. form1.text2. value;
If (j. length> = 6)
Document. getElementById ("s2"). innerHTML = "the password cannot exceed 6 characters"
Else
Document. getElementById ("s2"). innerHTML = "";
}
</Script>
<Body>
<Form name = "form1">
Username: <input type = "text" id = "text1" value = "Enter the username" onfocus = "javascript: document. form1.text1. value = ''" onblur = "tt ()"/>
<Span id = "s1"> </span> <br/>
Password: <input type = "text" id = "text2" value = "enter the password" onfocus = "javascript: document. form1.text2. value = ''" onblur = "a ()"/>
<Span id = "s2"> </span> <br/>
<Input type = "button" id = "button" value = "login"/>
</Form>
</Body>
</Html>
First: html5
Html5 adds several new attributes to the form text box, such as email, tel, number, time, required, autofocus, and placeholder. These attributes greatly change the form effect.
Placeholder is one of them, which can get the focus and lose the focus in the text box at the same time. Make sure that the value of input is null. The content of placeholder is what we see on the page.
The Code is as follows:
Copy codeThe Code is as follows:
<Input type = "text" value = "" placeholder = "Enter the content"/>
Type 2: jQuery
Principle: Make the val value of the form equal to the title value.
The Code is as follows:
Copy codeThe Code is as follows:
<Input type = "text" value = "" title = "Enter content"/>
Copy codeThe Code is 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>
The text box gets the focus and calls JavaScript without the focus.
Copy codeThe Code is as follows:
<% @ Page Language = "VB" CodeFile = "focus. aspx. vb" Inherits = "focus" %>
<! 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> No title page </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>
</Head>
<Body>
<Form id = "form1" runat = "server">
<Div>
<Asp: TextBox ID = "TextBox1" onmouseover = "return text?onmouseover (this);" onblur = "text=onmouseout (this)" runat = "server"> </asp: TextBox>
</Div>
</Form>
</Body>
</Html>
