Question

这是我创建的按钮和搜索栏，当用户点击搜索标签时，该按钮具有转到页面的功能，但是当用户按下回车键时我需要它才能工作。

这是搜索栏和按钮

<input type="text" method="get" class="form-control" id="search" placeholder="Search" value="">
<button type="button" id="go" class="btn btn-default" onclick="sendToPage();">Search</button>

这是功能

function sendToPage(){
    var input = document.getElementById("search").value;

    //Check to see if the user has entered apple/iphone;
    if (input === "apple"){
        //location.href="apple.html";                    
        location.replace("apple.html");
        return false;
    }
    else if (input === "iphone"){
        location.replace("apple.html");
        return false;
    }
}

Answer 1

在输入周围放置一个表单应该可以获得您正在寻找的结果。然后只需在调用sendToPage（）的表单中添加“onsubmit”;功能

Answer 2

您可以添加keyup并检查其event.keyCode。如果密钥代码为13，则表示用户在输入文本上单击了输入。

这样的事情：

document.getElementById("search")
    .addEventListener("keyup", function(event) {
    event.preventDefault();
    if (event.keyCode == 13) {
        if (input === "apple")              
            location.replace("apple.html");
        else if (input === "iphone")
            location.replace("apple.html");
    }
    return false;
});

或使用您的函数sendToPage()：

document.getElementById("search")
    .addEventListener("keyup", function(event) {
    event.preventDefault();
    sendToPage();
    return false;
});

Answer 3

您的输入字段的ID似乎是“搜索”，因此您可以尝试这样做：请注意，enter的键码是13.所以我们可以将输入码与13进行比较。如果是，则进行搜索。

$('#search').keydown(function(event) {
    if (event.keyCode == 13) {
       var input = $(this).val();
       if (input === "apple"){
            //location.href="apple.html";                    
              location.replace("apple.html");
              return false;
       }
       else if (input === "iphone"){
              location.replace("apple.html");
              return false;
       }
      return false;
    }
  });

});

Answer 4

This is the button 

<!-This is the button -->
<div id="search-bar">
<div class="form-group">
    <input type="text" method="get" class="form-control" id="search" placeholder="Search" value="">
     <button type="button" id="go" class="btn btn-default" onclick="sendToPage();" onChange="aliasonclick">Search</button>
</div>
</div>

如何在用户按Enter键时使搜索工作

4 个答案: