Judgment code for getting focus and losing focus in the text box

Source: Internet
Author: User

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>

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.