Menu
while making a web I didn't get focus in a "input" into Bootstrap Modal, I tried everything and didn't work, modal appears but input doesn't get focus. I have make a "test.php" with a simple modal and doesn't work either. Here is the "test.php"
<html lang="es">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="../css/bootstrap.min.css" rel="stylesheet">
<script src="../js/jquery.min.js"></script>
<script src="../js/bootstrap.min.js">
<script>
$('#myModal').on('shown.bs.modal', function () {
$('#referencia').focus();
})
</script>
</head>
<body>
<!-- Button trigger modal -->
<button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
Launch demo modal
</button>
<!-- Modal -->
<div class="modal fade" id="myModal">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title">Modal title</h4>
</div>
<div class="modal-body">
<input name="referencia" id="referencia" type="text" class="form-control text-uppercase" placeholder="Descripción">
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->
</div><!-- /.modal -->
</body>
If I try this code on my server it doesn't work, on unelink.es server doesn't work either, but if I put the same code on "fiddle", works fine.
Any idea of what is wrong? If I need something else... or install something in server.
P.D. Sorry for my English.
585
Answer: Use the jQuery . focus() method You can simply use the jQuery . focus() method to set the focus on the first input box or textarea inside the Bootstrap modal when it is loaded upon activation.
To trigger the modal window, you need to use a button or a link. Then include the two data-* attributes: data-toggle="modal" opens the modal window. data-target="#myModal" points to the id of the modal.
Change the size of the modal by adding the . modal-sm class for small modals (max-width 300px), . modal-lg class for large modals (max-width 800px), or . modal-xl for extra large modals (max-width 1140px).
Try this (autofocus added to your link):
<input name="referencia" id="referencia" type="text" class="form-control text-uppercase" placeholder="Descripción" autofocus>
or try this:
$('#myModal').on('shown.bs.modal', function () {
$('#myInput').focus();
})
or this:
// Every time a modal is shown, if it has an autofocus element, focus on it.
$('.modal').on('shown.bs.modal', function() {
$(this).find('[autofocus]').focus();
});
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
