Как назначить метод обработки на input в Sweetalert2?

Question

[danilr]

Мне необходимо навесить свой собственный обработчик на input в плагине Sweetalert2.
Но html там выводится строкой, поэтому если просто прописать oninput="myMethod", а метод определить чуть выше, то не работает.

const myMethod = (e) => console.log(e)

const { value: formValues } = await Swal.fire({
  title: 'Multiple inputs',
  html:
    '<input oninput="myMethod" id="swal-input1" class="swal2-input">' +
    '<input id="swal-input2" class="swal2-input">',
  focusConfirm: false,
  preConfirm: () => {
    return [
      document.getElementById('swal-input1').value,
      document.getElementById('swal-input2').value
    ]
  }
})

Answer 1

[nowm]

Можно прослушивать события на уровне документа:

const myMethod = event => {
    if (event.target && event.target.id === 'swal-input1') {
        // Поймали событие "input" для элемента #swal-input1
    }
};

document.addEventListener('input', myMethod);

const { value: formValues } = await Swal.fire({/* . . . */});

document.removeEventListener('input', myMethod);

Кстати, если вы используете ReactJS, то можно использовать sweetalert2-react-content. С ним у вас будет возможность в качестве HTML использовать компоненты ReactJS, в которых можно делать всё, что угодно, включая кастомные обработчики событий, привязанные к конкретным элементам. Можно делать примерно такую вещь:

import SwalRaw from "sweetalert2";
import withReactContent from 'sweetalert2-react-content';

const Swal = withReactContent(SwalRaw);

Swal.fire({
    html: (
        <div>
            <input onInput={console.log} id="swal-input1" className="swal2-input">
            <input id="swal-input2" className="swal2-input">
        </div>
    ),
});

Swal вызывается как обычно, но можно дополнительно использовать компоненты ReactJS для таких options как: title, html, confirmButtonText, denyButtonText, cancelButtonText, footer и closeButtonHtml.

Comments

[danilr]

нормальное решение, правда надеялся на апи самого плагина как-то

[nowm]

danilr, да, с ним сложно становится работать, если нужно что-то хоть немного нестандартное. Кстати, если вы используете ReactJS, то можно использовать «sweetalert2-react-content». С ним у вас будет возможность в качестве HTML использовать компоненты ReactJS, в которых можно делать всё, что угодно, включая кастомные обработчики событий, привязанные к конкретным элементам. Я делал примерно такую вещь:

import SwalRaw from "sweetalert2";
import withReactContent from 'sweetalert2-react-content';

const Swal = withReactContent(SwalRaw);

И потом, Swal вызывается как обычно, но можно дополнительно использовать компоненты ReactJS для таких options как: title, html, confirmButtonText, denyButtonText, cancelButtonText, footer и closeButtonHtml.

[nowm]

danilr, добавил это в ответ — вдруг кому-то пригодится.

[nowm]

danilr, кстати, ещё, как вариант, когда вы использовали oninput="myMethod" это могло не сработать из-за того, что в HTML-атрибутах нужно писать обычный JS-код. То есть, вместо myMethod нужно было писать myMethod(), чтобы что-то работало.