[javascript] SweetAlert의 단축키 설정 옵션

24 Nov 2023

javascript

SweetAlert은 사용자에게 알림을 표시하는 데 사용되는 인기있는 JavaScript 라이브러리입니다. SweetAlert에서는 사용자가 키보드의 단축키를 사용하여 편리하게 상호작용할 수 있는 옵션을 제공합니다. 이 문서에서는 SweetAlert에서 사용할 수 있는 단축키 설정 옵션에 대해 설명하겠습니다.

SweetAlert에서의 단축키 설정

SweetAlert은 다음과 같은 단축키 설정 옵션을 제공합니다:

escKey: ESC 키를 눌렀을 때 SweetAlert을 닫을지 여부를 설정합니다. 기본값은 true입니다.
confirmKey: 확인(OK) 키를 눌렀을 때 SweetAlert의 확인 버튼을 클릭할지 여부를 설정합니다. 기본값은 true입니다.
cancelKey: 취소(Cancel) 키를 눌렀을 때 SweetAlert의 취소 버튼을 클릭할지 여부를 설정합니다. 기본값은 false입니다.

예제

다음은 SweetAlert에서 단축키 설정을 사용하는 예제입니다:

Swal.fire({
  title: '단축키 설정 예제',
  text: 'ESC 키로 SweetAlert 닫기, 확인 키로 확인 버튼 클릭',
  icon: 'success',
  showCancelButton: true,
  confirmButtonColor: '#3085d6',
  cancelButtonColor: '#d33',
  confirmButtonText: '확인',
  cancelButtonText: '취소',
  escKey: true, // ESC 키로 SweetAlert 닫기 설정
  confirmKey: true // 확인 키로 확인 버튼 클릭 설정
}).then((result) => {
  if (result.isConfirmed) {
    // 확인 버튼이 클릭되었을 때 실행할 코드
  } else if (result.isDismissed) {
    // SweetAlert이 닫혔을 때 실행할 코드
  }
});

위의 예제에서 SweetAlert이 열려있는 동안 사용자는 키보드의 ESC 키로 SweetAlert을 닫을 수 있으며, 확인 키를 누르면 확인 버튼이 클릭됩니다.

참고 자료

SweetAlert 공식 문서: https://sweetalert.js.org/
GitHub 저장소: https://github.com/sweetalert2/sweetalert2