如何根据焦点输入框填充Bootstrap TokenField？tokenfield-2焦点问题

我来帮你搞定这个问题！核心要解决两个关键点：一是让你的TokenField能正确响应焦点，二是跟踪当前活跃的输入框，把复选框选中的邮箱精准填充进去。

第一步：确保TokenField能正常获取焦点 #

Bootstrap TokenField是把原生<input>包装起来的组件，直接调用元素的focus()可能没效果，得操作它内部的原生输入框。另外先确认你的三个TokenField都正确初始化了：

// 初始化所有TokenField
$('#tokenfield-1, #tokenfield-2, #tokenfield-3').tokenfield({
  autocomplete: {
    source: [], // 有自动补全需求的话可以在这里加数据源
    delay: 100
  },
  showAutocompleteOnFocus: true
});

如果想手动测试让tokenfield-2获得焦点，可以用这个方法：

// 让tokenfield-2获得焦点
$('#tokenfield-2').tokenfield('getInputElement').focus();

第二步：跟踪当前获得焦点的TokenField #

我们需要一个变量来记录哪个TokenField正处于活跃状态，这样点击复选框时就知道该往哪加邮箱：

let activeTokenField = null;

// 给所有TokenField绑定焦点事件
$('.tokenfield').on('focus', function() {
  activeTokenField = $(this);
  console.log('当前活跃的输入框：', activeTokenField.attr('id')); // 方便调试查看
}).on('blur', function() {
  // 加100ms延迟，避免点击复选框时误判失去焦点
  setTimeout(() => {
    // 检查是否还有任何TokenField处于焦点状态
    if (!$('.tokenfield:focus').length) {
      activeTokenField = null;
    }
  }, 100);
});

第三步：绑定复选框事件，填充到活跃的TokenField #

假设你的邮箱复选框类是.email-checkbox，每个复选框的value就是邮箱地址，那我们可以这样处理：

$('.email-checkbox').on('change', function() {
  const selectedEmail = $(this).val();
  
  // 如果没有活跃的输入框，提示用户先选中一个
  if (!activeTokenField) {
    alert('请先点击要添加邮箱的输入框哦');
    return;
  }

  if ($(this).is(':checked')) {
    // 添加邮箱作为新的token
    activeTokenField.tokenfield('createToken', { 
      value: selectedEmail, 
      label: selectedEmail 
    });
  } else {
    // 如果取消勾选，移除对应的token
    const currentTokens = activeTokenField.tokenfield('getTokens');
    const tokenIndex = currentTokens.findIndex(token => token.value === selectedEmail);
    if (tokenIndex !== -1) {
      activeTokenField.tokenfield('removeToken', tokenIndex);
    }
  }
});

额外小提示 #

• 调试的时候可以在焦点事件里加console.log，确认activeTokenField是否正确更新；
• 如果你的TokenField有自定义样式，确保没有覆盖掉焦点状态的样式，不然可能看不到视觉反馈；
• 要是需要默认选中第一个TokenField作为初始活跃状态，可以在页面加载完成后调用它的焦点方法。

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