Sweet Alert中添加的输入框无法编辑，该如何解决？

我之前也碰到过类似的情况，你这个输入框没法编辑的问题，大概率是焦点被抢占、样式限制或者插件未正确初始化导致的，给你几个可行的解决方案：

1. 手动给输入框绑定焦点 #

Sweet Alert弹窗弹出时，默认会把焦点锁定在自身的按钮上，导致输入框拿不到焦点没法编辑。你可以在弹窗打开的回调里手动给输入框设置焦点：

swal({
  title: "Confirm?",
  text:'<input id="datepicker" class="form-control">',
  type: "warning",
  customClass: 'swal-custom-width',
  html:true,
  showCancelButton: true,
  confirmButtonClass: "btn-success",
  confirmButtonText: "Confirm",
  cancelButtonText: "Cancel",
  closeOnConfirm: false,
  closeOnCancel: false,
  showLoaderOnConfirm: true,
  onOpen: function() {
    // 弹窗完全打开后，给输入框设置焦点
    document.getElementById('datepicker').focus();
  }
});

2. 调整CSS消除交互限制 #

除了display: initial，还要确保输入框没有被其他样式限制交互：

.swal-custom-width #datepicker {
  display: initial;
  /* 禁止阻止鼠标交互的设置 */
  pointer-events: auto;
  /* 确保输入框层级足够高，不被遮挡 */
  z-index: 99999;
  opacity: 1;
  visibility: visible;
}

3. 延迟初始化Datepicker插件 #

如果你的datepicker是用jQuery UI这类插件实现的，直接插入HTML不会自动绑定插件事件，得等弹窗渲染完成后再初始化：

swal({
  // 保持原有参数不变
  onOpen: function() {
    // 初始化datepicker（以jQuery UI为例）
    $('#datepicker').datepicker();
    // 再给输入框设置焦点
    $('#datepicker').focus();
  }
});

4. 检查Sweet Alert版本兼容性 #

如果用的是旧版Sweet Alert（v1.x），html参数的渲染可能有bug，试试换成content参数，或者升级到Sweet Alert 2版本（API略有调整，但对自定义HTML的支持更稳定）。

你可以先试第一种方案，焦点问题是这类场景里最常见的原因，要是不行再依次排查后面的方法~

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