如何触发点击事件时，按下回车键?文本区域

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/类名的输入，这样我们可以很容易地定位它。在我的示例中，我将添加searchText作为此输入的ID。

JavaScript:

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

jQuery:

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

Answer 2

是的，这将与keydown工作。但是你需要添加javascript才能让它工作。

<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的事件侦听器。e.keyCode将为您提供特殊的键(对于Enter恰好是13)

下面是一个例子:

$("#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"
        />

希望这对你有帮助!

Answer 4

我在下面使用计划javascript给出了示例代码。这个解决方案可以在没有jquery或其他库的情况下工作。

在按键事件中，您可以调用与点击事件相同的方法(或)直接触发按钮点击，按照下面提到的option 1和option 2。

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>