focus() and blur()
Clicking on the input tag with the mouse makes the input state that the focus is obtained.
And leaving the input state is said to be out of focus.
So let's start by seeing some behavior when we get focus.
Do something when you get focus
$('.class_Name').focus();
Doing something when out of focus
$('.class_Name').blur();
We studied val() in the previous tutorial, so let's use it.
When you get the focus, the text that says you've got the focus will appear in the input box.
HTML
<input type="text" class="text1" value="input your name" /> <input type="text" class="text2" value="input your id" />
jQuery
var text1 = $('.text1');
text1.focus(function(){
text1.val('got the focus.');
});
text1.blur(function(){
text1.val('out of focus.');
});
It can be expressed as above. We have implemented the features below.
view Result
Click on the input field above to get the focus, then press the tab to get it out of focus.
Example
<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<title>COREASUR :: jQuery Course</title>
<script type="text/javascript" src="https://code.jquery.com/jquery-3.2.0.min.js" ></script>
<script type="text/javascript">
$(function(){
var text1 = $('.text1');
text1.focus(function(){
text1.val('got the focus'');
});
text1.blur(function(){
text1.val('out of focus.');
});
});
</script>
<style>
</style>
</head>
<body>
<input type="text" class="text1" value="input your name" />
<input type="text" class="text2" value="input your id" />
</body>
</html>
Finish the course. ^^