Javascript 如何将click listener添加到键盘按钮enter？

我已经创建了一个javascript代码，但是点击enter按钮的功能还不能工作，它如何工作

html

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();
            }
        }
    }

函数landingSearch（）{
让输入=document.getElementById（'searchbar'）。值
input=input.toLowerCase（）；
设x=document.getElementsByClassName（'landing-pages-column'）；
对于（i=0；i

---

请帮助我，在哪里可以添加代码单击侦听器？

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

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

---

无需为表单提交添加事件侦听器。 只需将输入字段包装在表单标记中，enter键就会自动工作。像这样

<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>

将

输入

和

按钮

放在

表单

中，并将表单的操作设置到要提交数据的页面。然后将JS挂接到该表单的

submit

事件：

提交

let loadMore=document.querySelector（“#load more”）；
document.querySelector（“#搜索表单”）.addEventListener（'submit'，函数（e）{
e、 预防默认值（）；
让输入=（document.querySelector（'#searchbar'）.value | |''.toLowerCase（）；
设x=document.querySelector（'.landing pages column'）；
对于（i=0；i

---

请注意，在上面的示例中，使用了不引人注目的事件处理程序来代替过时的

onclick

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

const form=document.getElementsByClassName（'landing-pages-form-search'）[0]；
表格。addEventListener（“提交”，登陆搜索）；
功能登陆搜索（e）{
e、 预防默认值（）；
console.log（'enterworks'）；
让输入=document.getElementById（'searchbar'）。值
input=input.toLowerCase（）；
设x=document.getElementsByClassName（'landing-pages-column'）；
对于（i=0；i

1.
2.
3.
4.
5

您想用此代码做什么？您想用enter键提交表单吗？是的，我想用enter键提交：（$（“#搜索栏”）.keypress（函数（事件）{if（event.keyCode==13）{landingSearch（）；}）；将

输入

和

按钮

放在

表单

中，将表单的操作设置为您要将数据提交到的页面。然后将JS挂接到该表单的

提交

事件

$（'#搜索栏'）。打开（“按键”，函数（事件）{if（event.keyCode==13）{}）

我尝试了，但结果返回到初始显示我尝试了此代码，但结果返回到第一个条件，就像我有5个内容，我尝试搜索内容2，当我单击“输入结果显示2”并突然返回到第一个条件5content@Dini当您键入2并按enter键时，应该只显示第二项？是的，请尝试访问mylink and seacrh hull或seikotype 2就是我回答的例子before@Dini看起来您没有添加

e

和

e.preventDefault（）；

，查看我的代码我尝试了这段代码，但结果返回到第一个条件，就像我有5个内容，我尝试搜索内容2，当我单击“输入结果显示2”并突然返回到第一个条件5内容时，我不知道你的意思，如果没有看到包含相关HTML和CSS的完整示例，就不可能看到问题

<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>