Невозможно получить фокус на Textbox, когда открывается модальное всплывающее окно - PullRequest
Новая
       29

Невозможно получить фокус на Textbox, когда открывается модальное всплывающее окно

0 голосов
/ 30 мая 2019

Hii Я хочу сфокусироваться на вводимом текстовом поле, когда открывается модальное всплывающее окно начальной загрузки 

<div class="modal fade nopading" id="myModalpop" role="dialog">
    <div class="model-area">

        <!-- Modal content-->
        <div class="modal-content">
            <div class="modal-head">
                <a class="navbar-brand" href="index.html"><img src="~/Content/images/logo.png" alt="Ova" style="float: left; padding-top: 10px;"></a>
                <form class="form-inline md-form form-sm mt-0" style="text-align: center;" method="get" action="@Url.Action("Review", "Product")">
                    <a href"#"><i class="fa fa-search" aria-hidden="true"></i></a>
                    <input name="id" class="form-contro form-control-sm ml-3 w-75 wow fadeInRight animated" id="txtsearch"  type="text" placeholder="Search" aria-label="Search">
                </form>
                <button type="button" class="close" data-dismiss="modal">&times;</button>

            </div>
            <div class="modal-body" style="padding: 0px;">
                @*<p class="links_p wow fadeInRight animated">QUICK LINKS</p>*@

            </div>

        </div>
    </div>

</div><!-- end navbar-cell -->

Я применил JavaScript 

<script type="text/javascript">
$(document).ready(function () {

    $('#myModalpop').on('show.bs.modal', function () {

        $('#txtsearch').focus;
        //$(this).find('#txtsearch').focus();
     });
});
</script>

Фокус на текстовом поле

Ответы [ 3 ]

0 голосов
/ 30 мая 2019

Вызывается с выбранным идентификатором всплывающего окна. 

$('#myModalpop #txtsearch').focus();
0 голосов
/ 30 мая 2019

У вас есть два решения, чтобы решить эту проблему

первый использует функцию setTimeout для установки фокуса вашего текстового поля в событии 'show.bs.modal', потому что это событие вызывается перед моделью, показанной как 

$(function () {
    $('#myModalpop').on('show.bs.modal', function () {
          setTimeout(function(){ $('#txtsearch').focus(); }, 300);         
     });
});

Второе решение использует событие 'shown.bs.modal', которое сработало после показа мод, но вы должны удалить класс fade из вашей модели следующим образом: 

$(function () {
    $('#myModalpop').on('shown.bs.modal', function () { 
        $('#txtsearch').focus();
     });
});
0 голосов
/ 30 мая 2019

Edit: 

<div class="model-area">

'show.bs.modal'

изменить на 

<div class="modal-dialog">

'shown.bs.modal'

Уведомление модель и модальное

Вы пропустили скобку? 

$('#txtsearch').focus();
...