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:
| The code is as follows |
Copy Code |
$ ("P"). focus (); or $ ("P"). Focus (FN) |
Blur (): Use when losing focus, same as onblur.
Such as:
| The code is as follows |
Copy Code |
$ ("P"). blur (); or $ ("P"). blur (FN) |
Cases
| The code is as follows |
Copy Code |
<script type= "Text/javascript" >
$ (document). Ready (function () {
$ ("input"). focus (function () {
$ ("input"). CSS ("Background-color", "#FFFFCC");
});
$ ("input"). blur (function () {
$ ("input"). CSS ("Background-color", "#D6D6FF");
});
});
</script>
<body>
Enter your name: <input type= "text"/>
<p> Please click in the input field above to get focus, and then click outside the input area to lose focus. </p>
</body> |
When the mouse clicks in the search box, the text disappears.
| The code is as follows |
Copy Code |
| <meta http-equiv= "Content-type" content= "text/html; Charset=utf-8 "/>
<title>input lose focus and gain focus jquery Focus Event Plugin </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);
}
});
};
/* Below is the call method * *
$.focusblur ("#searchkey");
});
</script>
<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>input loses focus and gets focus jquery Focus event plugin, <br/><strong style= "color: #F00" > Mouse clicks in the search box when the text disappears </ Strong>. </p> </body>
|
One based on Ajax values is to show or hide div
| The code is as follows |
Copy Code |
| <tr>
<TD width= ' height= ' align= ' right ' ><span class= ' red ' >*</span> mobile:</td>
<TD width= ' 198 ' align= ' center ' ><input name= "Tgmo" type= "text" class= "TCINP" id= "Tgmo" size= "/></td" >
<td><span class= "Gray" > Room le NET member login name can get 5 room le coins
</span></td>
</tr>
Js
$ (function () {
$ (' #tgmo '). blur (function () {
$.post (' Post.php?action=check ', {' Tgmo '): $ (' Tgmo '). Val ()},function (data)
{
if (data==0)
{
$ ( ' #sy_a '). Show ();
$ (' #autoregister '). val (1);
}
else
{
$ (' #sy_a '). Hide ();
$ (' # Autoregister '). val (0);
}
};
})
}); |
