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.
$('.class_Name').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.
<input type="text" class="text1" value="input your name" /> <input type="text" class="text2" value="input your id" />
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.
Click on the input field above to get the focus, then press the tab to get it out of focus.
<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<title>EVERDEVEL :: 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. ^^
Thank you for visiting. If you have any inquiry or explanation of mistakes, please use the comments below.
ALL COMMENTS 0
Sort by
