We used to write input in JS in the various events are directly written in input, yesterday I began to use the full jquery, and now to talk about my jquery blur () focus () event learning notes.
For the focus event of the element, we can use the focus function of jquery (), Blur ().
Focus (): used when the focus is obtained, as in JavaScript, onfocus using the same method.
Such as:
| The code is as follows |
Copy Code |
$ ("P"). focus (); or $ ("P"). Focus (FN) |
Blur (): used when losing focus, as with 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> Click in the input field above to get the focus, and then click on the input domain to make it lose focus. </p>
</body> |
The text disappears when the mouse clicks in the search box.
| The code is as follows |
Copy Code |
<meta http-equiv= "Content-type" content= "text/html; Charset=utf-8 "/>
<title>input loses focus and gets 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 calling method */
$.focusblur ("#searchkey");
});
</script>
<body>
<form action= "" method= "POST" >
<input name= "" type= "text" value= "Enter search keywords" id= "Searchkey"/>
<input name= "" type= "Submit" id= "searchbtn" value= "Search"/>
</form>
<p>input loses focus and gets focus jquery Focus event plug-in, <br/><strong style= "color: #F00" > Mouse click in the search box when the text disappears </ Strong>. </p> </body>
|
An AJAX value to determine whether 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 network Member Login name to get 5 room 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);
}
});
})
});
|
"declaration"This article link address is: http://www.php230.com/1412685601.html, reprint please indicate source!
jquery loses focus and gets focus event blur () Focus ()
