Home > Developer > JavaScript
The input loses focus and obtains focus.
The text in the search box disappears.
When we are doing a website, we often use the search box to get the focus and to lose the focus. because of laziness, every time we write it, it's annoying, in a similar situation, just call it.
Related js Code:
Copy codeThe Code is as follows:
<Html xmlns = "http://www.w3.org/1999/xhtml">
<Head>
<Meta http-equiv = "Content-Type" content = "text/html; charset = UTF-8"/>
<Title> input loses focus and jquery focus event Plugin-Lazy website construction </title>
<Script src = "http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type = "text/javascript"> </script>
<Script type = "text/javascript">
$ (Document). ready (function (){
// Focusblur
JQuery. focusblur = function (focusid ){
Var focusblurid = $ (focusid );
Var defval = focusblurid. val ();
Focusblurid. focus (function (){
Var thisval = $ (this). val ();
If (thisval = defval ){
$ (This). val ("");
}
});
Focusblurid. blur (function (){
Var thisval = $ (this). val ();
If (thisval = ""){
$ (This). val (defval );
}
});
};
/* The following is the call Method */
$. Focusblur ("# searchkey ");
});
</Script>
</Head>
<Body>
<Form action = "" method = "post">
<Input name = "" type = "text" value = "input search keyword" id = "searchkey"/>
<Input name = "" type = "submit" id = "searchbtn" value = "Search"/>
</Form>
<P> the input loses focus and obtains focus jquery focus event plug-in. <br/> <strong style = "color: # F00 "> the text disappears when you click in the search box </strong>. </P>
</Body>
</Html>
Jquery gets and loses focus events
Copy codeThe Code is as follows:
<Script src = "jquery-1.9.1.js" type = "text/javascript"> </script>
<Script type = "text/javascript">
$ (Function (){
$ ('# Username'). focus (function () // obtain the trigger time of the classroom.
{
$ ('# Username'). val ('');
})
$ ('# Username'). Time triggered when blur (function () loses focus
{
If ($ ('# username'). val () = 'marry '){
$ ('# Q'). text ('user name already exists! ')
}
Else {$ ('# Q'). text (' OK! ')}
})
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
