如何停止在javascript中以表单重新加载页面的输入键答案

【问题标题】：How to stop enter key from reloading page in a form in javascript如何停止在javascript中以表单重新加载页面的输入键
【发布时间】：2012-09-13 15:45:17
【问题描述】：

我有一个带有按钮的搜索栏，可以搜索其他网站上的内容。我让它正常运行（它在新选项卡中的另一个站点上搜索）但是每当我在搜索栏中单击输入时，我正在重新加载的页面。起初它从按回车键并单击搜索重新加载，然后我将输入类型更改为按钮而不是提交。当点击按钮时，这会重新加载，但是当按下回车键时，页面会重新加载。此外，它仅在单击搜索栏时才会重新加载，而不仅仅是在任何时候。必须为输入键选择搜索栏才能重新加载页面。

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

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

【问题讨论】：

标签： javascript forms enter

【解决方案1】：

那是因为您正在提交到一个不存在的页面。

在您的 <form> 声明中改用 onsubmit：

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

然后确保您在 SearchBlog() 函数中使用 return false;。你应该很高兴。

【讨论】：

这样，您可以通过单击提交按钮/图像或在表单中按 Enter 来提交具有所需结果的表单。这对用户体验更好！
所以我应该摆脱 method="POST" name="searchform" id="searchform" 并使用 onsubmit="SearchBlog(); 代替？
不，我会保留所有这些。理想情况下，如果您的用户没有启用 Javascript，请让它优雅地降级。但是，请添加 onsubmit="SearchBlog();"。
谢谢！这非常有效，但是仍然需要重新加载，但只需要不到半秒的时间。仅当搜索栏为空白时才会注意到这一点。如果搜索栏为空，我已经设置了 if 语句以阻止脚本打开新选项卡，但是如果搜索栏为空，我可以让页面根本不重新加载吗？并指定，我把 return false;在我的 javascript 中的 if 语句的内部和外部。

【解决方案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;
}

【讨论】：

可能是因为它是“OnClick”