如何将点击监听器添加到键盘按钮输入？

Question

我创建了一个javascript代码，但是点击回车按钮的功能还不能用，怎么用？

html

<div class="landing-pages-form-search">
     <input type="text" name="search" id="searchbar" placeholder="Search">
     <input type="submit" onclick="return landingSearch();">
</div>

javascript

    function landingSearch() {
        let input = document.getElementById('searchbar').value
        input = input.toLowerCase();
        let x = document.getElementsByClassName('landing-pages-column');

        for (i = 0; i < x.length; i++) {
            if (!x[i].innerHTML.toLowerCase().includes(input)) {
                x[i].style.display = "none";
                $("#load-more").hide();
            }
            else {
                x[i].style.display = "list-item";
                $("#load-more").hide();
            }
        }
    }

请帮帮我，我在哪里可以添加代码点击监听器？

Answer 1

您可以创建一个函数并在受尊重的事件上调用您的其他函数

$('#searchbar').keypress(function(event) {  // or keydown
   if (event.keyCode == 13) {  // code for Enter
        landingSearch();
    } 
});

Answer 2

表单提交无需添加事件监听器。您只需要将输入字段包装在表单标签中，回车键就会自动起作用。像这样

<form action="">
 <div class="landing-pages-form-search">
  <input type="text" name="search" id="searchbar" placeholder="Search">
  <input type="submit" onclick="return landingSearch();">
 </div>
</form>

Answer 3

将input和button放在form中，并将表单的操作设置为您要将数据提交到的页面。然后将您的 JS 挂接到该形式的 submit 事件：

<div class="landing-pages-form-search">
  <form action="#" id="search-form">
    <input type="text" name="search" id="searchbar" placeholder="Search">
    <button type="submit">Submit</button>
  </form>
</div>

let loadMore = document.querySelector('#load-more');

document.querySelector('#search-form').addEventListener('submit', function(e) {
  e.preventDefault();

  let input = (document.querySelector('#searchbar').value || '').toLowerCase();
  let x = document.querySelector('.landing-pages-column');

  for (i = 0; i < x.length; i++) {
    if (!x[i].innerHTML.toLowerCase().includes(input)) {
      x[i].style.display = "none";
      loadMore.style.display = "none";
    } else {
      x[i].style.display = "list-item";
      loadMore.style.display = "none";
    }
  }
});

请注意在上面的示例中使用了不显眼的事件处理程序来代替过时的 onclick 属性

Answer 4

在表单中使用输入并在提交事件上设置处理程序的正确方法，它将适用于单击和输入

const form = document.getElementsByClassName('landing-pages-form-search')[0];
form.addEventListener('submit', landingSearch);
function landingSearch(e) {
        e.preventDefault();
        console.log('enter works');
        let input = document.getElementById('searchbar').value
        input = input.toLowerCase();
        let x = document.getElementsByClassName('landing-pages-column');

        for (i = 0; i < x.length; i++) {
            if (!x[i].innerHTML.toLowerCase().includes(input)) {
                x[i].style.display = "none";
                $("#load-more").hide();
            }
            else {
                x[i].style.display = "list-item";
                $("#load-more").hide();
            }
        }
    }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<form class="landing-pages-form-search">
     <input type="text" name="search" id="searchbar" placeholder="Search">
     <input type="submit">
</form>
<div class="landing-pages-column">1</div>
<div class="landing-pages-column">2</div>
<div class="landing-pages-column">3</div>
<div class="landing-pages-column">4</div>
<div class="landing-pages-column">5</div>

如何将点击监听器添加到键盘按钮输入？

How to add click listener to a keyboard button enter?

javascript

jquery

listener

onclicklistener