Bootstrap Popover内文本输入框无法交互问题求助

问题现象 #

使用Bootstrap 5实现Popover功能，触发元素为图片，Popover内容包含输入框和按钮。按钮可正常点击，但输入框无法获得焦点、无法交互，看似被禁用但未设置disabled属性。

问题代码 #

HTML代码 #

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">

<img src="https://via.placeholder.com/100"
  data-bs-toggle="popover"
  data-bs-offset="0,14"
  data-bs-placement="top"
  data-bs-html="true"
  data-bs-content="<div class='input-group-sm'>
  <input type='text' class='form-control' placeholder='https://...'/>
  <button class='btn btn-primary'>Save</button></div>"
>
    
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-kenU1KFdBIe4zVF0s0G1M5b4hcpxyD9F7jL+jjXkk+Q2h455rYXK/7HAuoJl+0I4" crossorigin="anonymous"></script>

JS代码 #

const pop = new bootstrap.Popover(document.querySelector('[data-bs-toggle="popover"]'));

原因分析 #

1. 触发元素是<img>，属于非可聚焦元素，Bootstrap默认的click触发逻辑会导致点击Popover内元素时，事件冒泡到触发元素，触发Popover的关闭/切换逻辑，干扰输入框的焦点获取。
2. 默认的Popover触发行为（click）会在点击页面任意区域（包括Popover内容）时触发关闭，导致输入框无法稳定获得焦点。

解决方法 #

方法一：设置可聚焦触发元素+焦点触发 #

修改触发元素的属性，让它成为可聚焦元素，并将触发方式改为focus：

<img src="https://via.placeholder.com/100"
  tabindex="0"
  data-bs-toggle="popover"
  data-bs-offset="0,14"
  data-bs-placement="top"
  data-bs-html="true"
  data-bs-trigger="focus"
  data-bs-content="<div class='input-group-sm'>
  <input type='text' class='form-control' placeholder='https://...'/>
  <button class='btn btn-primary'>Save</button></div>"
>

• tabindex="0"：让图片元素可以被聚焦
• data-bs-trigger="focus"：设置Popover在元素获得焦点时打开，失去焦点时关闭，避免点击内部元素触发关闭逻辑

方法二：阻止Popover内容的事件冒泡 #

如果需要保留click触发方式，可以通过JS阻止Popover内容内的点击事件冒泡：

const popoverElement = document.querySelector('[data-bs-toggle="popover"]');
const pop = new bootstrap.Popover(popoverElement);

// 监听Popover显示事件，给内容添加事件阻止冒泡
popoverElement.addEventListener('shown.bs.popover', function () {
  const popoverContent = document.querySelector('.popover .popover-body');
  popoverContent.addEventListener('click', function (e) {
    e.stopPropagation();
  });
});

这样点击Popover内的输入框和按钮时，事件不会冒泡到触发元素，不会触发Popover的关闭逻辑，输入框就能正常交互。

内容的提问来源于stack exchange，提问作者Devid Mercer