在表单标签外的单个文本输入中按 Enter 键后刷新页面答案

【问题标题】：Refreshing page after hiting enter key in single text input outside form tags在表单标签外的单个文本输入中按 Enter 键后刷新页面
【发布时间】：2017-06-19 10:20:16
【问题描述】：

我有一个 HTML 字段。当我集中注意力并按回车键时，页面重新加载。我真的不知道为什么。它不在表单标签内 - 我不能使用表单标签 ....

我使用 AngularJS。

HTML：

<div class="search-input">
    <input type="text" ng-model="q.searchPhrase" id="menu-search-input" placeholder="Search expression ..." />
</div>
<div class="search-submit">
    <button ng-click="search()" type="button">Search</button>
</div>

编辑 1：

search() 函数并不重要，因为它是在单击事件时触发的，并且它的工作原理与我一样，除非我单击“搜索”按钮。

标签按钮提交一个表单，当它具有“提交”属性时，我认为。但是，我使用 div 而不是按钮标签，但是当我按 Enter 键时，它仍然会在文本输入中重新加载页面。

编辑 2：

搜索功能不重要——里面只有一个console.log();

【问题讨论】：

我不熟悉 Angular，但是 Angular 会动态创建 html 表单吗？检查诸如右键单击/检查元素之类的浏览器工具，也许有角度的动态形式。它的正常浏览器行为是在一个字段中输入一个表单。当按下 ENTER 键码时，您可以通过返回 false “onkeypress”（或类似事件）来省略它。
你能提供你的search函数吗？
Html 完全没问题。在我的情况下，它不会重新加载相同的 HTML 内容。请提供search()。

标签： javascript html angularjs forms input

【解决方案1】：

button标签默认提交表单，你可以使用a代替

<div class="search-submit">
    <a ng-click="search()">Search</a>
</div>

【讨论】：

【解决方案2】：

您可以改用输入

<input type="button" ng-click="search()">Search</input>

【讨论】：

【解决方案3】：

我创建一个JS函数：

function bugFix() {
    if (window.event.keyCode == 13) {
        console.log("ENTER PRESSED");
        window.event.preventDefault();
        window.event.stopPropagation();
        return false;
    }
}

向输入添加事件调用：

<input type="text" onkeydown="bugFix()" ng-model="q.searchPhrase" id="menu-search-input" placeholder="Search expression ..." />

而且它有效。在 IE 中，这个修复功能之前没问题，但是 Chrome 每次按 enter 时都会重新加载页面。

【讨论】：