如何阻止Enter键在javascript中重新加载表单页面

Question

我有一个带按钮的搜索栏，可以在另一个网站上搜索东西。我让它正常工作(它在另一个网站的新标签中搜索)，但每当我在搜索栏中点击enter时，我所在的页面就会重新加载。首先，它通过按enter键并单击search重新加载，然后我将输入类型改为按钮，而不是提交。这会在单击按钮时负责重新加载，但当按下Enter键时，页面将重新加载。此外，它仅在单击搜索栏时才重新加载，而不是一直重新加载。必须选择搜索栏，按enter键才能重新加载页面。

html：

<div id="search-3" class="widget widget_search">
    <h3 align="center">Search the other site!</h3>
    <form method="post" name="searchform" id="searchform">

      <span class="searching">
        <input type="text" value="" name="s" id="s" />
      </span>
      <input class="submit" type="button" Onclick="SearchBlog();" value="Search" />

    </form>
</div>

javascript：

function SearchBlog()
{
    var searchQuery = document.searchform.s.value;
    if(searchQuery != ""){
        var destination = "website.com/s" + searchQuery;
        window.open(destination, "_blank");
    }
}

我希望能够使用Enter键进行搜索，但我不希望它重新加载页面。

Answer 1

这是因为你正在提交一个不存在的页面。

在<form>声明中使用onsubmit：

<form method="POST" name="searchform" id="searchform" onsubmit="SearchBlog();">
   ...
</form>

然后确保在SearchBlog()函数中使用return false;。你应该可以走了。

Answer 2

试试这个：

<input class="submit" type="button" Onclick="return SearchBlog();" value="Search" />

和

function SearchBlog()
{
    var searchQuery = document.searchform.s.value;
    if(searchQuery != ""){
        var destination = "website.com/s" + searchQuery;
        window.open(destination, "_blank");
    }
    return false;
}