使用Bootstrap Tags Input无法选中标签的问题求助

这个问题的核心原因是该组件的标签元素默认绑定了mousedown事件并调用了e.preventDefault()，直接阻止了浏览器的文本选中默认行为，导致选中操作完成后状态立刻丢失。

以下是两种可行的解决方法：

方法1：修改组件源码 #

找到组件中处理标签mousedown事件的代码片段，通常类似这样：

$tag.on('mousedown', function(e) {
  e.preventDefault();
  // 组件原有逻辑
});

将其中的e.preventDefault();注释或删除，就能保留浏览器的文本选中默认行为。

方法2：添加自定义脚本（无需修改源码） #

在页面加载完成后，添加以下脚本覆盖组件的事件拦截：

document.addEventListener('DOMContentLoaded', function() {
  document.querySelectorAll('.tag').forEach(tag => {
    tag.addEventListener('mousedown', function(e) {
      e.stopImmediatePropagation();
    }, true);
  });
});

这段代码通过stopImmediatePropagation()阻止组件的事件处理函数执行，从而让浏览器的文本选中行为正常触发。

同时可以配合添加CSS，强制允许标签文本被选中：

.tag {
  user-select: text !important;
}

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