AlpineJS 에서 두 개의 키를 조합하는 단축키 만들기

Bradtaste 블로그에 검색기능을 추가하면서 cmd+k 또는 win+k 버튼으로 검색창이 열 수 있는 단축키를 만들고 싶어서 알파벳을 포함하는 두 개의 키를 조합하는 방법에 대해 기록합니다. AlpineJS 참 좋다!!!^^ㅎ

우선, AlpineJS 에서 키보드를 Bind 하는 간단한 예제는 다음과 같습니다.

<input type="text" @keyup.enter="alert('Submitted!')">

보다 자세한 내용을 볼 수 있는 AlpineJS 공식홈페이지 문서는 아래 참조에 링크 추가해놓겠습니다.

아래는 홈페이지에서 cmd+k 또는 win+k 버튼을 누르면 동작하게 만드는 코드입니다.

<div @keydown.window.prevent.meta.k="alert('Hi!');">
    Content Here...
</div>

참고로 @keyup 은 동작하지 않고, @keydown 만 동작합니다.

참조

AlpineJS - Keyboard events
SHORTCUTS USING ALPINE JS

Search By Essepage