Sweetalert: 在引导模式之上使用时，输入字段不起作用

创建于 2015-07-29 · 22评论 · 资料来源: t4t5/sweetalert

我目前正在从引导模式中调用 swal。似乎按钮可以工作，但 swal 的输入不接受点击，也不会成为焦点。我想知道这是一个已知问题还是我正在做的事情。

资料来源

mteichtahl

最有用的评论

我发现罪魁祸首是tabindex="-1"设置在 Bootstrap 的模态上。

修复：

// call this before showing SweetAlert:
function fixBootstrapModal() {
  var modalNode = document.querySelector('.modal[tabindex="-1"]');
  if (!modalNode) return;

  modalNode.removeAttribute('tabindex');
  modalNode.classList.add('js-swal-fixed');
}

// call this before hiding SweetAlert (inside done callback):
function restoreBootstrapModal() {
  var modalNode = document.querySelector('.modal.js-swal-fixed');
  if (!modalNode) return;

  modalNode.setAttribute('tabindex', '-1');
  modalNode.classList.remove('js-swal-fixed');
}

Cinamonas 于 2016-07-23

👍23 🎉5 😄2 👎1

所有22条评论

我遇到过同样的问题。我最终做的是用modal.hide“隐藏”模态，打开swal，用inputValue做任何你需要的事情，然后在swal成功或取消时用modal.show显示模态。
希望这可以帮助。

KillerSquid 于 2015-08-10

担
我找到了解决方法。我明天发布

从 Outlook 发送

在 2015 年 8 月 10 日星期一上午 6:52 -0700，“Dan Kaufman”通知@github.com 写道：

我遇到过同样的问题。我最终做的是用modal.hide“隐藏”模态，打开swal，用inputValue做任何你需要的事情，然后在swal成功或取消时用modal.show显示模态。

希望这可以帮助。

—
直接回复此邮件或在 GitHub 上查看。

mteichtahl 于 2015-08-10

👍1

嗨，泰希塔尔，

您是否仍然发布了修复程序？我找不到它。真的会有帮助！

diederik555 于 2015-12-11

你好，

甜蜜警报（以及 Sweetalert2）的相同问题。
输入字段不会仅在 Firefox 上获得焦点。仅当从引导模式打开 swal 时才会发生这种情况。

暂时还想不通问题。真的很奇怪。

YannDanthu 于 2016-06-06

我也有同样的问题。。。有人解决了吗？

Cu4rach4 于 2016-06-19

嗨，这允许显示输入占位符，但不能专注于输入...

第537章

Cu4rach4 于 2016-06-19

我也有同样的问题，找不到解决方法...

lynnpen 于 2016-07-15

S0c5 于 2016-07-17

我发现罪魁祸首是tabindex="-1"设置在 Bootstrap 的模态上。

修复：

// call this before showing SweetAlert:
function fixBootstrapModal() {
  var modalNode = document.querySelector('.modal[tabindex="-1"]');
  if (!modalNode) return;

  modalNode.removeAttribute('tabindex');
  modalNode.classList.add('js-swal-fixed');
}

// call this before hiding SweetAlert (inside done callback):
function restoreBootstrapModal() {
  var modalNode = document.querySelector('.modal.js-swal-fixed');
  if (!modalNode) return;

  modalNode.setAttribute('tabindex', '-1');
  modalNode.classList.remove('js-swal-fixed');
}

Cinamonas 于 2016-07-23

👍23 🎉5 😄2 👎1

我有一个几乎相同的问题，除了只有当模态太高以至于它可以在 y 轴上滚动时才会发生。

timm3 于 2016-07-28

请帮我...

eminumut 于 2016-12-31

Cinamonas 的标签修复对我不起作用:(

navas 于 2017-03-14

👎2

+1
@enumut @navas
你在展示 swal 之前调用过 fixBootstrapModal() 吗？一开始我忘了这样做，但现在完美无缺！

谢谢@Cinamonas

Alagaesia93 于 2017-04-05

@Alagaesia93

你能给我举一些例子吗？

eminumut 于 2017-04-09

@enumut

fixBootstrapModal()
swal({whatever}, function(isConfirm){
whatever
restoreBootstrapModal()
}

这个对我有用：）

Alagaesia93 于 2017-04-11

修复在 IE11 中生成语法错误

caleb87 于 2017-06-27

👎1

@caleb87 ，我已经更新了代码片段以不使用箭头函数和const 。

Cinamonas 于 2017-06-28

👍1

这似乎是 Bootstrap 的一个问题，所以我现在将关闭。感谢您修复@Cinamonas！

t4t5 于 2017-09-08

嗨，我遇到了同样的问题。
这个问题可以通过从 Bootstrap Modal 中删除 { tabindex="-1" } 来解决。
这对我来说很好用。

gopal9999 于 2017-12-14

👍1

有谁知道如何在 R 中应用此修复程序？我遇到了同样的问题，但到目前为止我尝试将其转换为 R 失败了

ghost 于 2018-01-14

我发现罪魁祸首是tabindex="-1"设置在 Bootstrap 的模态上。

修复：

// call this before showing SweetAlert:
function fixBootstrapModal() {
  var modalNode = document.querySelector('.modal[tabindex="-1"]');
  if (!modalNode) return;

  modalNode.removeAttribute('tabindex');
  modalNode.classList.add('js-swal-fixed');
}

// call this before hiding SweetAlert (inside done callback):
function restoreBootstrapModal() {
  var modalNode = document.querySelector('.modal.js-swal-fixed');
  if (!modalNode) return;

  modalNode.setAttribute('tabindex', '-1');
  modalNode.classList.remove('js-swal-fixed');
}

天才

jhoanborges 于 2019-03-25

对于那些拥有多个模态的人，您可以使用：
Documento sem título (1).pdf

MateusFGoncalves 于 2019-05-27

此页面是否有帮助？

0 / 5 - 0 等级

Sweetalert: 在引导模式之上使用时，输入字段不起作用

最有用的评论

所有22条评论

相关问题