Let us explain with a suitable example:-
effect.html:-
<!DOCTYPE html>
<html>
<head>
<script src="js/jquery.min.js"></script>
<script src="js/effect.js"></script>
</head>
<body>
Name: <input type="text" name="fullname"><br>
Email: <input type="email" name="email">
</body>
</html>
effect.js:-
$(document).ready(function(){
$("input").focus(function(){
$(this).css("background-color","lightpink");
});
$("input").blur(function(){
$(this).css("background-color","#ffffff");
});
});
Screenshots:-
effect.html:-
<!DOCTYPE html>
<html>
<head>
<script src="js/jquery.min.js"></script>
<script src="js/effect.js"></script>
</head>
<body>
Name: <input type="text" name="fullname"><br>
Email: <input type="email" name="email">
</body>
</html>
effect.js:-
$(document).ready(function(){
$("input").focus(function(){
$(this).css("background-color","lightpink");
});
$("input").blur(function(){
$(this).css("background-color","#ffffff");
});
});
Screenshots:-
Explanation:-
Here, "focus" and "blur" function has been used. When we will click on the textboxes, its color will be "lightpink", i.e, on focus and when we move to another textbox, it will change to "white" color, i.e, on blur functionality.
No comments:
Post a Comment