The below html code create two input fields with label Name and Age.
<!DOCTYPE html>
<html>
<head><title>Focusin Focusout Example in jquery</title></head>
<body>
<p><label>Name:</label><input type="text" id="name" /><span id="name_feedback"></span></p>
<p><label>Age :</label><input type="text" id="age" /><span id="age_feedback"></span></p>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="focusin_focusout.js"></script>
</body>
</html>
Below is a jquery code for focus in and focus out example. When Name input field is focused, a message is displayed "Enter your name" and when Age input field is focused, "Enter your age" is displayed.
//focusin_focusout.js
$('#name').focusin(function(){
$('#name_feedback').html('Enter your name');
});
$('#age').focusin(function(){
$('#age_feedback').html('Enter your age');
});
$('#name').focusout(function(){
$('#name_feedback').html('');
});
$('#age').focusout(function(){
$('#age_feedback').html('');
});
<!DOCTYPE html>
<html>
<head><title>Focusin Focusout Example in jquery</title></head>
<body>
<p><label>Name:</label><input type="text" id="name" /><span id="name_feedback"></span></p>
<p><label>Age :</label><input type="text" id="age" /><span id="age_feedback"></span></p>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="focusin_focusout.js"></script>
</body>
</html>
Below is a jquery code for focus in and focus out example. When Name input field is focused, a message is displayed "Enter your name" and when Age input field is focused, "Enter your age" is displayed.
//focusin_focusout.js
$('#name').focusin(function(){
$('#name_feedback').html('Enter your name');
});
$('#age').focusin(function(){
$('#age_feedback').html('Enter your age');
});
$('#name').focusout(function(){
$('#name_feedback').html('');
});
$('#age').focusout(function(){
$('#age_feedback').html('');
});
No comments:
Post a Comment