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

Question

问题在标题中描述。我有一个 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();
});

弹出框 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 文件中重新创建了这种情况。

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

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

Answer 1

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

对于 Bootstrap 4

模态 + 输入弹出框

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

输入弹出窗口 + 内部内容

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

输入弹出框 + 外部内容

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

对于 Bootstrap 5

模态 + 输入弹出框

const popover = new bootstrap.Popover(document.querySelector('.callPopover'), {
    container: 'body',
    title: 'Search',
    html: true,
    placement: 'bottom',
    sanitize: false,
    content() {
        return document.querySelector('#PopoverContent').innerHTML;
    }
})

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1" crossorigin="anonymous">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.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">
            <button class="btn btn-outline-primary" type="button" data-bs-toggle="popover" data-bs-placement="bottom" data-bs-html="true" data-bs-title="Search">
                <i class="fas fa-search"></i>
            </button>
        </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="btn-close" data-bs-dismiss="modal" aria-label="Close"></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">
                                    <button class="btn btn-outline-primary callPopover" type="button" data-bs-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 class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-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-bs-toggle="modal" data-bs-target="#exampleModal">
                Launch demo modal
            </button>
        </div>
    </div>
</div>

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/js/bootstrap.bundle.min.js" integrity="sha384-ygbV9kiqUc6oa4msXn9868pTtWMgiQaeYH7/t7LECLbyPA2x65Kgf80OJFdroafW" crossorigin="anonymous"></script>
<script defer src="https://use.fontawesome.com/releases/v5.8.1/js/all.js"></script>

输入弹出窗口 + 内部内容

const popover = new bootstrap.Popover(document.querySelector('[data-toggle="popover"]'), {
    container: 'body',
    title: 'Search',
    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">
          <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>`
})

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1" crossorigin="anonymous">

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

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/js/bootstrap.bundle.min.js" integrity="sha384-ygbV9kiqUc6oa4msXn9868pTtWMgiQaeYH7/t7LECLbyPA2x65Kgf80OJFdroafW" crossorigin="anonymous"></script>
<script defer src="https://use.fontawesome.com/releases/v5.8.1/js/all.js"></script>

输入弹出框 + 外部内容

const popover = new bootstrap.Popover(document.querySelector('.callPopover'), {
    container: 'body',
    title: 'Search',
    html: true,
    placement: 'bottom',
    sanitize: false,
    content() {
        return document.querySelector('#PopoverContent').innerHTML;
    }
})

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1" crossorigin="anonymous">

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

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

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/js/bootstrap.bundle.min.js" integrity="sha384-ygbV9kiqUc6oa4msXn9868pTtWMgiQaeYH7/t7LECLbyPA2x65Kgf80OJFdroafW" crossorigin="anonymous"></script>
<script defer src="https://use.fontawesome.com/releases/v5.8.1/js/all.js"></script>