自定义HTML元素无法切换CSS :focus伪类问题求助

我之前帮别人处理过类似的问题，核心原因其实很好理解：Tagify生成的<tags>是自定义HTML元素，它本身并不是原生表单控件，实际焦点是落在它内部的.tagify__input输入框上的。Bootstrap的form-control:focus样式是针对原生表单控件（如<input>、<textarea>）的:focus伪类设计的，所以哪怕你给<tags>加了form-control类，也不会自动触发聚焦时的蓝色光晕效果。

下面是两种可行的解决方案：

方案一：通过Tagify实例监听内部输入框的聚焦状态 #

初始化Tagify后，直接监听它内部输入框的focus和blur事件，同步给外层<tags>元素添加/移除自定义聚焦类：

JavaScript代码 #

// 假设你的原始文本输入框id为"tagInput"
const input = document.getElementById('tagInput');
const tagifyInstance = new Tagify(input);

// 监听内部输入框聚焦事件
tagifyInstance.DOM.input.addEventListener('focus', () => {
  tagifyInstance.DOM.scope.classList.add('is-focused');
});

// 监听内部输入框失焦事件
tagifyInstance.DOM.input.addEventListener('blur', () => {
  tagifyInstance.DOM.scope.classList.remove('is-focused');
});

CSS样式 #

把Bootstrap form-control:focus的样式复用给自定义的is-focused类：

.tags.form-control.is-focused {
  border-color: #86b7fe;
  box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25);
  /* 如果需要其他Bootstrap聚焦样式，也可以从form-control:focus里复制过来 */
}

方案二：全局事件委托（适合多个Tagify实例） #

如果页面上有多个Tagify组件，用事件委托的方式更高效，不需要逐个初始化监听：

JavaScript代码 #

// 监听全局聚焦事件
document.addEventListener('focusin', (e) => {
  // 检查目标是否是Tagify的内部输入框
  if (e.target.classList.contains('tagify__input')) {
    const tagsElement = e.target.closest('.tags');
    if (tagsElement) {
      tagsElement.classList.add('is-focused');
    }
  }
});

// 监听全局失焦事件
document.addEventListener('focusout', (e) => {
  if (e.target.classList.contains('tagify__input')) {
    const tagsElement = e.target.closest('.tags');
    if (tagsElement) {
      tagsElement.classList.remove('is-focused');
    }
  }
});

CSS样式 #

和方案一的样式完全一致，只需要确保<tags>元素已经有form-control类即可。

额外小技巧 #

如果你不想自定义类，也可以直接通过CSS选择器关联内部输入框的聚焦状态到外层元素：

.tags.form-control:has(.tagify__input:focus) {
  border-color: #86b7fe;
  box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25);
}

不过要注意 :has()选择器的浏览器兼容性（现代浏览器基本都支持，但旧版IE不支持）。

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