事件 - htmx:prompt

htmx:prompt 是 HTMX 在你使用 hx-prompt 属性时，用于捕获用户输入值并允许你自定义弹窗行为的事件。

它的主要作用是让你用 JavaScript 自定义提示输入框（替代默认的 window.prompt）。

当你点击带有 hx-prompt="变量名" 的元素时，HTMX 会默认调用 window.prompt(...)，但你可以通过监听 htmx:prompt 来替换这个行为。

事件参数

• detail.elt - 触发请求的元素
• detail.target - 请求的目标
• detail.prompt - 用户对提示的响应

示例代码

<button 
  hx-delete="/delete-item" 
  hx-prompt="reason"
  hx-vals='{"itemId": 42}'
  hx-target="#result"
  hx-swap="innerHTML">
  删除项目
</button>

<div id="result"></div>

点击按钮时，HTMX 会弹出默认的 window.prompt("Please enter value for reason:")，然后将用户输入的值作为参数发送：

DELETE /delete-item
Content-Type: application/x-www-form-urlencoded

reason=你输入的理由&itemId=42

自定义弹窗

<script>
  document.body.addEventListener("htmx:prompt", function(event) {
    event.preventDefault(); // 阻止默认 window.prompt

    const variable = event.detail.prompt; // 即 hx-prompt 的值
    console.log("需要为变量收集值：", variable);

    // 用你自己的弹窗逻辑（此处简单写个例子）
    const input = window.confirm("是否确认删除？");
    if (input) {
      event.detail.value = "用户确认删除";  // 设置你想提交的值
    } else {
      event.detail.cancel = true;  // 用户取消
    }
  });
</script>