Sweetalert 确认按钮中断输入字段

Question

当我在 sweet alert 中使用输入字段时，我遇到了一个奇怪的错误，我无法在我的输入字段中放置光标，这是一个 jsfiddle。

如果我包括

showConfirmButton: false

然后它工作正常这里是 fiddle

https://jsfiddle.net/16L4sddt/

Answer 1

当您有 showConfirmButton: true 时，openModal() 函数（第 653 行）将焦点置于确认按钮（第 662 行）：

$okButton.focus();

当您尝试在输入字段中单击时，handleOnBlur() 函数（第 396 行）被调用，因为确认按钮失去了焦点。这些函数定义了 $targetElement 变量，它指的是确认按钮（第 397 行）。跳过一些行...该函数将遍历模态的每个按钮以检查它是否是获得焦点的元素。在您的情况下，目标元素是输入字段，因此它不是任何按钮。变量 btnIndex 保留值 -1。第 413-416 行：

if (btnIndex === -1) {
  // Something in the dom, but not a visible button. Focus back on the button.
  $targetElement.focus();
}

因此确认按钮 ($targetElement) 将返回焦点，从而防止输入字段接收到焦点。

Sweetalert 确认按钮中断输入字段

Sweetalert confirm button breaks input fields

sweetalert