如何在按下回车键时触发点击事件？文本区

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

是的，这适用于 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 2

您必须为 keyup 添加一个事件侦听器作为您的输入字段。 e.keyCode 将为您提供特殊键（恰好是 13 表示 Enter）

这是一个例子：

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

虽然您可以使用 onkeydown 属性，但我更喜欢通过 JavaScript 事件侦听器和处理程序来完成这些事情。 如果您想使用 onkeydown 属性执行此操作，请查看 Bryan 的回答。

我会先在输入中添加一个 ID/Class 名称，这样我们就可以轻松定位它。在我的示例中，我将添加 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 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>

如何在按下回车键时触发点击事件？文本区

How to trigger click event when pressing enter key? Text area

html

search

onkeydown