Sweetalert: Eingabefeld funktioniert nicht, wenn es über einem Bootstrap-Modal verwendet wird

Erstellt am 29. Juli 2015  ·  22Kommentare  ·  Quelle: t4t5/sweetalert

Ich rufe derzeit swal aus einem Bootstrap-Modal heraus an. Es scheint, dass die Tasten funktionieren, aber die Eingabe des Swal akzeptiert weder einen Klick noch nimmt er jemals den Fokus an. Ich frage mich, ob dies ein bekanntes Problem ist oder möglicherweise etwas, was ich tue.

Hilfreichster Kommentar

Ich habe festgestellt, dass der Täter tabindex="-1" , der auf Bootstraps Modal eingestellt ist.

Die Reparatur:

// 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');
}

Alle 22 Kommentare

Ich hatte das gleiche Problem. Was ich letztendlich getan habe, war, das Modal mit modal.hide zu "verstecken", den Swal zu öffnen, mit dem inputValue alles zu tun, was Sie brauchen, und dann das Modal mit modal.show bei Erfolg oder Abbruch des Swals anzuzeigen.
Hoffe das hilft.

Dan
Ich habe eine Lösung dafür gefunden. Ich poste es morgen

Von Outlook gesendet

Am Montag, den 10. August 2015 um 6:52 Uhr -0700 schrieb "Dan Kaufman" [email protected] :

Ich hatte das gleiche Problem. Was ich letztendlich getan habe, war, das Modal mit modal.hide zu "verstecken", den Swal zu öffnen, mit dem inputValue alles zu tun, was Sie brauchen, und dann das Modal mit modal.show bei Erfolg oder Abbruch des Swals anzuzeigen.

Hoffe das hilft.


Antworten Sie direkt auf diese E-Mail oder zeigen Sie sie auf GitHub an.

Hallo mteichtahl,

Hast du den Fix trotzdem gepostet? Ich kann es nicht finden. Würde wirklich helfen!

Hallo,

Gleiches Problem mit Sweet Alert (sowie Sweetalert2).
Das Eingabefeld erhält nicht nur den Fokus auf Firefox. Dies geschieht nur, wenn ein Swal aus einem Bootstrap-Modal geöffnet wird.

Kann das Problem noch nicht erkennen. Wirklich seltsam.

Ich habe das gleiche Problem... hat jemand eine Lösung?

Hallo, dies ermöglicht das Anzeigen von Eingabeplatzhaltern, ist jedoch nicht darauf ausgerichtet, sich auf die Eingabe zu konzentrieren ...

#537

Ich habe das gleiche Problem, finde die Lösung nicht...

+1

Ich habe festgestellt, dass der Täter tabindex="-1" , der auf Bootstraps Modal eingestellt ist.

Die Reparatur:

// 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');
}

Ich habe ein fast identisches Problem, außer dass es nur auftritt, wenn das Modal so groß ist, dass es auf der y-Achse scrollbar ist.

Bitte hilf mir...

Cinamonas' Tab Fix hat bei mir nicht funktioniert :(

+1
@eminumut @navas
Haben Sie fixBootstrapModal() aufgerufen, bevor swal angezeigt wurde? Das habe ich anfangs vergessen, aber jetzt funktioniert es einwandfrei!

Danke @Cinamonas

@alagaesia93

Würden Sie mir einige Beispiele zeigen?

@eminumut

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

Für mich geht das :)

Der Fix generiert einen Syntaxfehler in IE11

@caleb87 , ich habe das Snippet aktualisiert, um keine const .

Dies scheint ein Problem mit Bootstrap zu sein, daher werde ich vorerst schließen. Danke für die Korrektur @Cinamonas!

Hallo, ich hatte das gleiche Problem.
Dieses Problem kann durch Entfernen von { tabindex="-1" } aus Bootstrap Modal gelöst werden.
Es funktioniert gut für mich.

Weiß jemand, wie man dieses Update in R anwendet? Ich habe das gleiche Problem, aber meine Versuche, es in R umzuwandeln, sind bisher fehlgeschlagen

Ich habe festgestellt, dass der Täter tabindex="-1" , der auf Bootstraps Modal eingestellt ist.

Die Reparatur:

// 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');
}

Genius

Für diejenigen, die mehr als ein Modal haben, können Sie Folgendes verwenden:
Documento sem título (1).pdf

War diese Seite hilfreich?
0 / 5 - 0 Bewertungen

Verwandte Themen

jamieson99 picture jamieson99  ·  3Kommentare

fracz picture fracz  ·  4Kommentare

Untit1ed picture Untit1ed  ·  5Kommentare

blackrosezy picture blackrosezy  ·  6Kommentare

waldyrious picture waldyrious  ·  5Kommentare