텍스트 상자에서 Enter 키를 눌렀을 때 JavaScript로 버튼 클릭을 트리거하려면 어떻게 해야 합니까?

텍스트 상자 Enter 키에서 JavaScript를 사용하여 버튼 클릭 트리거

웹 개발에서는 다음과 같은 양식 요소에 대한 작업을 트리거하는 것이 바람직한 경우가 많습니다. 버튼, 특정 이벤트가 발생할 때. 일반적인 시나리오 중 하나는 텍스트 입력 필드 내에서 Enter 키를 누를 때 버튼 클릭이 트리거되는 것입니다. JavaScript로 이를 달성하는 방법은 다음과 같습니다.

jQuery 사용

인기 있는 JavaScript 라이브러리인 jQuery는 이 문제에 대한 간단한 솔루션을 제공합니다.

$("#id_of_textbox").keyup(function(event) {
    if (event.keyCode === 13) {
        $("#id_of_button").click();
    }
});

이 코드는 ID가 "id_of_textbox"인 텍스트 입력 필드에 keyup 이벤트 리스너를 연결합니다. 이 입력 내에서 Enter 키(keyCode 13)를 누르면 ID가 "id_of_button"인 버튼에 대한 클릭 이벤트가 트리거됩니다.

Custom JavaScript

라이브러리를 사용하지 않으려면 일반 JavaScript를 사용하여 이 기능을 구현할 수 있습니다.

document.getElementById("id_of_textbox").addEventListener("keyup", function(event) {
    if (event.keyCode === 13) {
        document.getElementById("id_of_button").click();
    }
});

이 코드는 동일한 작업을 수행합니다. jQuery 예제와 같지만 기본 addEventListener() 메서드를 사용하여 keyup 리스너를 텍스트 입력에 연결합니다.

사용 예

다음 HTML 마크업을 고려하세요.

<input type="text">

"txtSearch" 입력 내에서 Enter를 눌렀을 때 "btnSearch" 버튼을 클릭하면, 제공된 코드 조각 중 하나를 사용하여 그에 따라 요소 ID를 바꿉니다.

위 내용은 텍스트 상자에서 Enter 키를 눌렀을 때 JavaScript로 버튼 클릭을 트리거하려면 어떻게 해야 합니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!