How to focus first input field in popup on activation
Posted By : Monu Thakur | 27-Jun-2016
I'm going to describe how to focus on first input field or textarea in a Bootstrap modal on activation in this blog.You can use the predefined functions of jQuery ".focus()" method to set focus on the first input or textarea inside bootstrap modal when the load upon activation, such as:
Befor writting this code which is given below you have to include this library files in head tag:
<script src="https://code.jquery.com/jquery-1.11.2.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#myModalBox").on('shown.bs.modal', function(){
$(this).find('#inputClassName').focus();
});
});
</script>
<div class="example">
<a href="#myModalBox" class="btn btn-lg btn-primary" data-toggle="modal">Launch Demo Modal</a>
<!-- Modal HTML -->
<div id="myModal" class="modal fade">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title">Your Feedback</h4>
</div>
<div class="modal-body">
<form>
<div class="form-group">
<label for="inputClassName">Name</label>
<input type="text" class="form-control" id="inputClassName">
</div>
<div class="form-group">
<label for="inputComment">Comments</label>
<textarea class="form-control" id="inputComment" rows="4"></textarea>
</div>
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
<button type="button" class="btn btn-primary">Send</button>
</div>
</div>
</div>
</div>
</div>
I hope this blog will a great help to all.
THANKS
Cookies are important to the proper functioning of a site. To improve your experience, we use cookies to remember log-in details and provide secure log-in, collect statistics to optimize site functionality, and deliver content tailored to your interests. Click Agree and Proceed to accept cookies and go directly to the site or click on View Cookie Settings to see detailed descriptions of the types of cookies and choose whether to accept certain cookies while on the site.
About Author
Monu Thakur
Monu is an experienced Frontend Developer, having good knowledge of Photoshop, illustrator, HTML5, CSS3, Less, Sass, Javascript, Jquery, Angular 4, Angular 4 theme integration.