Enter 키를 누를 때 클릭 이벤트를 트리거하는 방법은 무엇입니까? 텍스트 영역

Question

내가 필요로 할 때 잘 작동하는 검색 영역이 있지만 문제는 입력 할 때 결과를 검색하지 않기 때문에 버튼을 눌러야합니다. 다른 코드를 시도했지만 아무 것도 작동하지 않으며 누구에게도 해결책이 있는지 궁금합니다. 이것은 내가 가진 코드 :이 함께 일할 수있는 것 같아요

<input 
data-path=".title" 
data-button="#title-search-button" 
type="text" 
value="" 
placeholder="Search..." 
data-control-type="textbox" 
data-control-name="title-filter" 
data-control-action="filter" 
/> 

을 "onKeyDown에 ="하지만 이후에 추가 정말로 확실하지 않다.

누군가가이를 해결할 수 있다면 정말 고맙겠습니다.

Answer 1

onkeydown 속성을 사용할 수 있지만 JavaScript 이벤트 리스너 인 & 핸들러를 통해 이러한 작업을 수행하는 것을 선호합니다. onkeydown 속성을 사용하여 이것을 수행하려면 Bryan의 대답을보십시오.

먼저 ID/클래스 이름을 입력에 추가하여 쉽게 타겟팅 할 수 있습니다. 필자의 예에서는이 입력의 ID로 searchText을 추가 할 것입니다.

자바 스크립트 :

document.getElementById('searchText').addEventListener("keydown",function(e){ 
    if(e.keyCode == 13){ 
    //doSomething() 
    } 
}); 

jQuery를 : 나는 계획 javascript를 사용하여 아래에 샘플 코드를 제공 한

$('#searchText').on('keydown',function(e){ 
    if(e.which == '13'){ 
    //doSomething(); 
    } 
}); 

Answer 2

예, keydown에서 작동합니다. 하지만 작동하려면 자바 스크립트를 추가해야합니다.

<input 
    data-path=".title" 
    data-button="#title-search-button" 
    type="text" 
    value="" 
    placeholder="Search..." 
    data-control-type="textbox" 
    data-control-name="title-filter" 
    data-control-action="filter" 
    onkeydown="if (event.keyCode == 13) { // Your search results code here; 
    return false; }" 
/> 

Answer 3

입력란에 keyup에 대한 이벤트 수신기를 추가해야합니다. 이 도움이

$("#myinput").on('keyup', function (e) { 
 
    if (e.keyCode == 13) { 
 
     alert("Enter clicked"); 
 
     // add your code here 
 
    } 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<input 
 
      id = "myinput" 
 
      data-path=".title" 
 
      data-button="#title-search-button" 
 
      type="text" 
 
      value="" 
 
      placeholder="Search..." 
 
      data-control-type="textbox" 
 
      data-control-name="title-filter" 
 
      data-control-action="filter" 
 
     />

희망 : e.keyCode 여기

(입력 13으로 발생하는) 예를 들어 당신에게 특수 키를 줄 것이다!

Answer 4

. 이 솔루션은 jquery 또는 다른 라이브러리없이 작동합니다.

키 누르기 이벤트에서 아래에 언급 된 option 1 및 option 2에 따라 버튼 클릭과 동일한 방식으로 click 이벤트를 호출 할 수 있습니다. [(가) 텍스트 입력 필드에 키를 입력 감지]의

function triggerSearch() { 
 
    if(event.keyCode === 13) { 
 
    // Option 1: You can call the 'search' method directly 
 
    //search(); 
 
    // Option 2: OR you can trigger the button `click` event 
 
    getElement('searchButton').click(); 
 
    } 
 
} 
 

 
function search() { 
 
    var searchTerm = getElement('searchTextBox').value; 
 
    getElement('searchTerm').innerHTML = searchTerm; 
 
} 
 

 
function getElement(id) { 
 
    return document.getElementById(id); 
 
}

<input 
 
      data-path=".title" 
 
      data-button="#title-search-button" 
 
      type="text" 
 
      value="" 
 
      placeholder="Search..." 
 
      data-control-type="textbox" 
 
      data-control-name="title-filter" 
 
      data-control-action="filter" 
 
      id="searchTextBox" 
 
      onkeydown="triggerSearch()" 
 
     /> 
 

 
<input type="button" value="Search" id="searchButton" onclick="search()" /> 
 
<br/><br/> 
 
Search Term: <span id="searchTerm"></span>