如何让bootbox中必填输入框获焦时恢复边框与boxShadow默认样式？

你需要给必填的输入框添加一个持续监听的focus事件，这样每次用户点击（获焦）这个输入框时，都会自动清除你设置的红色样式，恢复Bootstrap form-control 默认的浅蓝色聚焦效果。

核心思路 #

之前的操作只在提交按钮点击时触发，但focus事件会在输入框每次获得焦点时执行，刚好满足你“持续监听”的需求。我们只需要在事件回调里清除自定义的borderColor和boxShadow样式，让浏览器回到默认的样式规则。

完整代码实现 #

考虑到输入框可能是在bootbox弹窗中动态创建的，推荐使用事件委托来绑定focus事件，确保元素存在时能正常触发：

// 用事件委托绑定focus事件，兼容动态创建的元素
$(document).on('focus', '#inputDossierTitle', function() {
  // 清除自定义的红色样式，恢复默认
  $(this).css({
    borderColor: '',
    boxShadow: ''
  });
});

// 你的bootbox弹窗代码
bootbox.dialog({
  // 弹窗的其他配置（比如标题、内容）...
  ok: { 
    label: "Submit", 
    className: 'btn-success', 
    callback: function() { 
      var inputDossierTitle = document.getElementById("inputDossierTitle"); 
      var inputDossierSubTitle = document.getElementById("inputDossierSubTitle").value; 
      var inputDossierSummary = document.getElementById("inputDossierSummary").value; 
      var selectDossierPrivacySettings = document.getElementById("selectDossierPrivacySettings").value; 

      const isEmpty = str => !str.trim().length; 

      if (isEmpty(inputDossierTitle.value)) { 
        inputDossierTitle.style.borderColor = "red"; 
        inputDossierTitle.style.boxShadow = "0 0 0 0.2rem rgba(255, 0, 0, 0.36)"; 
        return false; 
      } else { 
        $.ajax({ 
          url : '/create-dossier', 
          type: "POST", 
          data: {
            title: inputDossierTitle.value, 
            sub_title: inputDossierSubTitle, 
            summary: inputDossierSummary, 
            PrivacySettings: selectDossierPrivacySettings
          }, 
          success : function () { 
            $('.filtr-container').remove(); 
            new Dossier(); 
          } 
        }); 
      } 
    } 
  }
});

为什么这样有效？ #

• 事件委托$(document).on('focus', '#inputDossierTitle', ...)：即使输入框是在弹窗弹出后才生成的动态元素，这个监听依然能生效，因为它是绑定在文档上，通过事件冒泡触发。
• 清除样式时设置为空字符串：这样浏览器会重新应用Bootstrap form-control:focus的默认样式（浅蓝色边框和阴影），不需要手动写默认值，更灵活。

替代方案（原生JS） #

如果你不想用jQuery，也可以用原生JS的事件监听：

// 确保元素存在后绑定事件，比如在bootbox的shown事件里
bootbox.dialog({
  // 其他配置...
  shown: function() {
    const inputDossierTitle = document.getElementById("inputDossierTitle");
    inputDossierTitle.addEventListener('focus', function() {
      this.style.borderColor = '';
      this.style.boxShadow = '';
    });
  },
  ok: {
    // 你的提交回调代码...
  }
});

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