弹出窗口中的Bootstrap 4输入字段

问题描述 投票：3回答：1

标题中描述了该问题。我有一个Bootstrap 4模态和一个带有按钮的输入字段的弹出窗口。在IE 11中一切正常，但在Firefox输入失去焦点。

酥料饼：

$('[data-toggle="popover"]').popover({
    container: "body",
    sanitize: false,
    content: function () {
        return $("#choose-user-popover-content").html();
    }
}).on('shown.bs.popover', function () {
    $('#ExecutorSNPSearchStr').focus();
});

Popover html：

<div id="choose-user-popover-content" style="display: none;">
<div class="row">
    <div class="col">
        <div class="input-group">
            <input type="text" class="form-control" id="ExecutorSNPSearchStr" aria-describedby="ExecutorSNPSearchStrAddon"/>
            <div class="input-group-append" id="ExecutorSNPSearchStrAddon">
                <button class="btn btn-sm btn-outline-info w-3" type="button">
                    <i class="fas fa-search"></i>
                </button>
                <button class="btn btn-sm btn-outline-danger w-3" type="button">
                    <i class="fas fa-trash-alt"></i>
                </button>
            </div>
        </div>
    </div>
</div>

https://i.stack.imgur.com/rTe2q.png

任何人都能说出这是什么原因，以及如何解决这个问题？

UPD：我在一个单独的html文件中重新创建了这种情况。

$(function () {
  $('[data-toggle="popover"]').popover({
      sanitize: false,
      content: function () {
          return $("#PopoverContent").html();
      }
  });
}).on('shown.bs.popover', function () {
  $('#ExecutorSNPSearchStr').focus();
});
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
   
<section>
    <div id="PopoverContent" style="display: none;">
        <div class="input-group">
            <input type="text" class="form-control" placeholder="Recipient's username"
                aria-label="Recipient's username with two button addons" aria-describedby="button-addon1">
            <div class="input-group-append" id="button-addon1">
                <button class="btn btn-outline-primary" type="button" data-toggle="popover" data-placement="bottom"
                    data-html="true" data-title="Search">
                    <i class="fas fa-search"></i>
                </button>
            </div>
        </div>
    </div>
</section>
<section>
    <div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel"
        aria-hidden="true">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="exampleModalLabel">Test modal</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body">
                    <div class="container">
                        <div class="row">
                            <div class="col">
                                <div class="input-group">
                                    <input type="text" class="form-control" placeholder="Recipient's username"
                                        aria-label="Recipient's username with two button addons"
                                        aria-describedby="button-addon4">
                                    <div class="input-group-append" id="button-addon4">
                                        <button class="btn btn-outline-primary" type="button" data-toggle="popover"
                                            data-trigger="click" data-placement="bottom" data-html="true"
                                            data-title="Search">
                                            <i class="fas fa-user-plus"></i>
                                        </button>
                                        <button class="btn btn-outline-danger" type="button">
                                            <i class="fas fa-user-minus"></i>
                                        </button>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                    <button type="button" class="btn btn-primary">Save changes</button>
                </div>
            </div>
        </div>
    </div>
</section>
<div class="container">
    <div class="row">
        <div class="col mt-5">
            <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal">
                Launch demo modal
            </button>
        </div>
    </div>
</div>
    
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<script defer src="https://use.fontawesome.com/releases/v5.8.1/js/all.js"></script>
css asp.net-core bootstrap-4 bootstrap-modal bootstrap-popover
1个回答
2
投票

有一个简单的错误，你的模态中有tabindex="-1"所以你的输入焦点正在被它删除。

MODAL + INPUT POPOVER

$(function () {
  $('[data-toggle="popover"]').popover({
      container: 'body',
      title: 'Search',
      html: true,
      placement: 'bottom',
      sanitize: false,
      content: function () {
          return $("#PopoverContent").html();
      }
  });
})
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">

<section>
    <div id="PopoverContent" class="d-none">
        <div class="input-group">
            <input type="text" class="form-control" placeholder="Recipient's username"
                   aria-label="Recipient's username with two button addons" aria-describedby="button-addon1">
            <div class="input-group-append" id="button-addon1">
                <button class="btn btn-outline-primary" type="button" data-toggle="popover" data-placement="bottom"
                        data-html="true" data-title="Search">
                    <i class="fas fa-search"></i>
                </button>
            </div>
        </div>
    </div>
</section>
<section>
    <div class="modal fade" id="exampleModal" role="dialog" aria-labelledby="exampleModalLabel"
        aria-hidden="true">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="exampleModalLabel">Test modal</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body">
                    <div class="container">
                        <div class="row">
                            <div class="col">
                                <div class="input-group">
                                    <input type="text" class="form-control" placeholder="Recipient's username"
                                        aria-label="Recipient's username with two button addons"
                                        aria-describedby="button-addon4">
                                    <div class="input-group-append" id="button-addon4">
                                        <button class="btn btn-outline-primary" type="button" data-toggle="popover">
                                            <i class="fas fa-user-plus"></i>
                                        </button>
                                        <button class="btn btn-outline-danger" type="button">
                                            <i class="fas fa-user-minus"></i>
                                        </button>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                    <button type="button" class="btn btn-primary">Save changes</button>
                </div>
            </div>
        </div>
    </div>
</section>
<div class="container">
    <div class="row">
        <div class="col mt-5">
            <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal">
                Launch demo modal
            </button>
        </div>
    </div>
</div>

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<script defer src="https://use.fontawesome.com/releases/v5.8.1/js/all.js"></script>

INPUT POPOVER + INSIDE CONTENT

$(function () {
    $('[data-toggle="popover"]').popover({
    container: 'body',
    html: true,
    placement: 'bottom',
    sanitize: false,
    content: 
    `<div id="PopoverContent">
      <div class="input-group">
        <input type="text" class="form-control" placeholder="Recipient's username"
             aria-label="Recipient's username with two button addons" aria-describedby="button-addon1">
        <div class="input-group-append" id="button-addon1">
          <button class="btn btn-outline-primary" type="button" data-toggle="popover" data-placement="bottom"
              data-html="true" data-title="Search">
            <i class="fas fa-search"></i>
          </button>
        </div>
      </div>
    </div>`
    })
});
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css"> 

<button type="button" class="btn btn-lg btn-danger" data-toggle="popover" title="Popover title">Click to toggle popover</button>

<script src="https://code.jquery.com/jquery-3.4.0.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>

INPUT POPOVER + OUTSIDE CONTENT

$(function () {
    $('[data-toggle="popover"]').popover({
    container: 'body',
    html: true,
    placement: 'bottom',
    sanitize: false,
    content: function() {
        return $('#PopoverContent').html()
    }
    })
});
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css"> 

<div id="PopoverContent" class="d-none">
  <div class="input-group">
    <input type="text" class="form-control" placeholder="Recipient's username"
         aria-label="Recipient's username with two button addons" aria-describedby="button-addon1">
    <div class="input-group-append" id="button-addon1">
      <button class="btn btn-outline-primary" type="button" data-toggle="popover" data-placement="bottom"
          data-html="true" data-title="Search">
        <i class="fas fa-search"></i>
      </button>
    </div>
  </div>
</div>

<button type="button" class="btn btn-lg btn-danger" data-toggle="popover" title="Popover title">Click to toggle popover</button>

<script src="https://code.jquery.com/jquery-3.4.0.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
最新问题
© www.soinside.com 2019 - 2024. All rights reserved.