Sweetalert: bidang input tidak berfungsi saat digunakan di atas modal bootstrap

Dibuat pada 29 Jul 2015 · 22Komentar · Sumber: t4t5/sweetalert

Saat ini saya memanggil swal dari dalam modal bootstrap. Tampaknya tombol berfungsi tetapi input swal tidak menerima klik juga tidak pernah fokus. Saya bertanya-tanya apakah ini masalah yang diketahui atau mungkin sesuatu yang saya lakukan.

Sumber

mteichtahl

Komentar yang paling membantu

Saya menemukan bahwa pelakunya adalah tabindex="-1" yang disetel pada modal Bootstrap.

Perbaikannya:

// 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 pada 23 Jul 2016

👍23 🎉5 😄2 👎1

Semua 22 komentar

Saya memiliki masalah yang sama. Apa yang akhirnya saya lakukan adalah 'menyembunyikan' modal dengan modal.hide, membuka swal, melakukan apa pun yang Anda butuhkan dengan inputValue, lalu menunjukkan modal dengan modal.show pada keberhasilan atau pembatalan swal.
Semoga ini membantu.

KillerSquid pada 10 Agu 2015

Dan
Saya menemukan perbaikan untuk ini. besok saya posting

Dikirim dari Outlook

Pada Senin, 10 Agustus 2015 pukul 06:52 -0700, "Dan Kaufman" [email protected] menulis:

Semoga ini membantu.

—
Balas email ini secara langsung atau lihat di GitHub.

mteichtahl pada 10 Agu 2015

👍1

Hai mteichtahl,

Apakah Anda masih memposting perbaikannya? Saya tidak dapat menemukannya. Akan sangat membantu!

diederik555 pada 11 Des 2015

Hai,

Masalah yang sama dengan peringatan manis (serta sweetalert2).
Bidang input tidak mendapatkan fokus pada firefox saja. Ini hanya terjadi ketika membuka swal dari modal bootstrap.

Belum bisa mengetahui masalahnya. Sangat aneh.

YannDanthu pada 6 Jun 2016

saya ngalamin hal yang sama...ada yg punya solusi?

Cu4rach4 pada 19 Jun 2016

hai, ini memungkinkan untuk menampilkan placeholder input, tetapi tidak memperbaiki untuk fokus pada input ...

#537

Cu4rach4 pada 19 Jun 2016

Saya memiliki masalah yang sama， tidak dapat menemukan perbaikannya ...

lynnpen pada 15 Jul 2016

S0c5 pada 17 Jul 2016

Saya menemukan bahwa pelakunya adalah tabindex="-1" yang disetel pada modal Bootstrap.

Perbaikannya:

// 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 pada 23 Jul 2016

👍23 🎉5 😄2 👎1

Saya memiliki masalah yang hampir sama, kecuali itu hanya terjadi jika modalnya sangat tinggi sehingga dapat digulir pada sumbu y.

timm3 pada 28 Jul 2016

Tolong bantu aku...

eminumut pada 31 Des 2016

Perbaikan tab Cinamonas tidak berfungsi untuk saya :(

navas pada 14 Mar 2017

👎2

+1
@eminumut @navas
Sudahkah Anda memanggil fixBootstrapModal() sebelum menampilkan swal? Saya lupa melakukannya pada awalnya, tetapi sekarang berfungsi dengan sempurna!

Terima kasih @Cinamonas

Alagaesia93 pada 5 Apr 2017

@Alagaesia93

Maukah Anda menunjukkan kepada saya beberapa contoh?

eminumut pada 9 Apr 2017

@eminumut

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

Ini bekerja untuk saya :)

Alagaesia93 pada 11 Apr 2017

Perbaikan menghasilkan kesalahan sintaks di IE11

caleb87 pada 27 Jun 2017

👎1

@caleb87 , saya telah memperbarui cuplikan untuk tidak menggunakan fungsi panah dan const .

Cinamonas pada 28 Jun 2017

👍1

Ini sepertinya menjadi masalah dengan Bootstrap jadi saya akan menutup untuk saat ini. Terima kasih atas perbaikannya @Cinamonas!

t4t5 pada 8 Sep 2017

Hai, saya telah menghadapi masalah yang sama.
Masalah ini dapat diselesaikan dengan menghapus { tabindex="-1" } dari Bootstrap Modal.
Ini bekerja dengan baik untuk saya.

gopal9999 pada 14 Des 2017

👍1

Adakah yang tahu cara menerapkan perbaikan ini di R? Saya mengalami masalah yang sama, tetapi upaya saya untuk mengubahnya menjadi R sejauh ini gagal

ghost pada 14 Jan 2018

Saya menemukan bahwa pelakunya adalah tabindex="-1" yang disetel pada modal Bootstrap.

Perbaikannya:

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

jenius