Question

我想在引导模式弹出窗口打开时专注于输入文本框

<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>

关注文本框

Answer 1

编辑：

<div class="model-area">

'show.bs.modal'

更改为

<div class="modal-dialog">

'shown.bs.modal'

注意型号和模式

您错过了支架吗？

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

Answer 2

以选定的弹出ID进行调用。

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

Answer 3

您有两种解决此问题的方法

第一个使用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();
     });
});

引导程序模式弹出窗口打开时无法关注文本框

3 个答案: