How to use blur() Method in jQuery
This article describe about blur() Method in jQuery.
jQuery Event blur() Method
Occur trigger or bind method on the blur event of selected element. This blur event occur when the element lose the focus.
Note: Mostly in the newer browser, blur event used on all element
Example
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$("input").focus(function () {
$("input").css("background-color", "Gray");
});
$("input").blur(function () {
$("input").css("background-color", "yellow");
});
});
</script>
</head>
<body>
Enter name: <input type="text" />
<p>When Click in the input field to get focus, and outside the input field to lose focus (blur).</p>
</body>
</html>
|
Output
Trigger the blur event for selected element.
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$("input").focus(function () {
$("input").css("background-color", "gray");
});
$("input").blur(function () {
$("input").css("background-color", "yellow");
});
$("#btn1").click(function () {
$("input").focus();
});
$("#btn2").click(function () {
$("input").blur();
});
});
</script>
</head>
<body>
Enter name: <input type="text" />
<p><button id="btn1">Trigger focus event for input field</button></p>
<p><button id="btn2">Trigger blur event for input field</button></p>
</body>
</html>
|
Output
Bind a Function to the blur Event
Syntax:
$(selector).blur(function)
|
Parameter |
Description |
function |
Optional. This function specifies to run when the blur event occurs. |
You may also want to read these related articles Click here
Ask Your Question
Got a programming related question? You may want to post your question here
Programming Answers here