[asp.net / js] 입력창에 포커스가 있을 때 Enter 키를 누르면 관련 버튼 연결하기

 

1. ASP.NET / Web Forms의 DefaultButton 사용

DefaultButton 속성을 사용하여 관련 버튼을 연결하면 "패널의 기본 버튼" 으로 지정할 수 있습니다.

DefaultButton="버튼ID" 형식으로 속성을 추가하면 되는데, 영역을 설정하기 위해 하단처럼 asp:Panel을 사용하였습니다.

<asp:Panel runat="server" DefaultButton="cmdSearch">
    <asp:TextBox ID="txtPower" runat="server" placeholder="검색어를 입력하세요" />
    <asp:Button ID="cmdSearch" runat="server" Text="검색" />
</asp:Panel>

 

• 동작 원리: 패널 내부에서 Enter를 누르면 DefaultButton에 지정한 버튼이 클릭됩니다(포스트백 발생).
• 장점: JS 없이 서버 컨트롤 방식으로 안정적. UpdatePanel 안에서도 잘 동작.

2. JavaScript / keydown 이벤트로 버튼 클릭 트리거 설정

JavaScirpt의 keydown 이벤트를 통해 버튼을 연결할 수 있습니다.

addEventListener 사용

// input 요소에 addEventListener 추가
document.querySelector("input").addEventListener('keydown', function (e) {
    if (e.key === 'Enter') {
      e.preventDefault();   // 폼의 기본 제출 방지(중복 제출 방지)
      document.querySelector("button").click();    // 연결한 버튼 클릭
    }
});

 

inline 방식으로 onkeydown 이벤트 사용

<asp:TextBox ID="txtPower" runat="server" placeholder="검색할 내용을 입력하세요" onkeydown="if(event.key==='Enter'){event.preventDefault(); document.querySelector('.DocTotalList-cmdSearch').click(); }" />
<asp:Button ID="cmdSearchs" runat="server" Text="검색" CssClass="DocTotalList-cmdSearch" />