@danilr

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

Мне необходимо навесить свой собственный обработчик на 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
    ]
  }
})
  • Вопрос задан
  • 214 просмотров
Решения вопроса 1
nowm
@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.
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы