SweetAlert改为content后，如何添加更多HTML或输入框？

嘿，我来帮你梳理下这几个问题的解决思路：

一、恢复使用原生HTML的方法 #

其实SweetAlert2并没有彻底禁用原生HTML的使用，你可以直接通过配置里的html参数来传入自定义HTML内容，完全能实现之前编辑HTML部分的效果。举个例子：

Swal.fire({
  title: '自定义HTML输入',
  html: '<div class="custom-input-container"><label>请输入内容：</label><input type="text" id="my-input" class="swal2-input"></div>',
  showCancelButton: true,
  preConfirm: () => {
    // 手动获取输入框的值
    return document.getElementById('my-input').value
  }
}).then((result) => {
  if (result.isConfirmed) {
    Swal.fire('你输入的是：', result.value, 'success')
  }
})

不过要注意，这种方式需要自己处理输入值的获取和校验，同时要警惕XSS风险，尽量避免传入不可信的HTML内容。

二、无需自定义HTML的输入框实现方式 #

如果只是需要添加输入框，其实没必要硬写HTML——SweetAlert2本身提供了内置的输入类型，用起来更贴合组件风格，还能自动处理样式和基础交互。比如文本输入框的示例：

Swal.fire({
  title: '请输入内容',
  input: 'text',
  inputPlaceholder: '在这里输入',
  showCancelButton: true,
  inputValidator: (value) => {
    if (!value) {
      return '总得输入点什么吧😉'
    }
  }
}).then((result) => {
  if (result.isConfirmed) {
    Swal.fire('提交成功！', `你输入的是：${result.value}`, 'success')
  }
})

除了text，它还支持email、password、select等多种内置输入类型，足够满足大部分常规需求。

三、改用自定义模态框的方案 #

如果SweetAlert2的限制还是让你觉得不够灵活，那直接用自定义模态框确实是更自由的选择。不管是原生HTML/CSS实现，还是用Bootstrap、Tailwind这类UI库的模态组件，都能让你完全掌控HTML结构、样式和交互逻辑。

比如原生模态框的基础实现示例：

<!-- 触发按钮 -->
<button id="open-modal-btn">打开自定义模态框</button>

<!-- 模态框容器 -->
<div id="custom-modal" class="modal-overlay">
  <div class="modal-content">
    <button class="modal-close">&times;</button>
    <h3>自定义输入表单</h3>
    <input type="text" placeholder="输入你的内容">
    <button class="modal-submit">提交</button>
  </div>
</div>

配合简单的JavaScript控制显示隐藏：

const modal = document.getElementById('custom-modal');
const openBtn = document.getElementById('open-modal-btn');
const closeBtn = document.querySelector('.modal-close');
const submitBtn = document.querySelector('.modal-submit');

// 打开模态框
openBtn.addEventListener('click', () => {
  modal.style.display = 'block';
});

// 关闭模态框
closeBtn.addEventListener('click', () => {
  modal.style.display = 'none';
});

// 点击遮罩层关闭
modal.addEventListener('click', (e) => {
  if (e.target === modal) {
    modal.style.display = 'none';
  }
});

// 提交逻辑
submitBtn.addEventListener('click', () => {
  const inputValue = document.querySelector('.modal-content input').value;
  if (inputValue) {
    alert(`你输入的内容是：${inputValue}`);
    modal.style.display = 'none';
  } else {
    alert('请输入内容哦！');
  }
});

这种方式没有组件限制，你可以根据需求随意调整布局和样式，适合复杂的自定义场景。

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