Question

我正在使用Ember CLI并注意到奇怪的行为。当用户点击输入并按下回车键时，页面会刷新。

我的页面有一个这样的基本元素，不属于任何形式：

<input type="text" class="form-control" id="per_page" value="50">

我目前正在通过以下网页提供服务：

ember cli

所以节点正在托管，并且正在进行花哨的实时重装，以便在我更新作为底层应用程序一部分的页面时。

那么是什么导致页面重新加载输入中按下的回车键？它可能是节点还是实时重载？当用户按下回车键时输入只是刷新页面而我错过了我的HTML for dummies book？

**更好的是，我如何拦截并通过以下方式调用函数：

{{action** "myFunction"}}

Answer 1

发生这种情况是因为当您按Enter键时，表单会被提交，从而导致页面重新加载。您需要做的是在表单上设置onsubmit="return false"，以便在提交期间不会发生任何事情。您可以通过添加操作属性action="doSomething"

来绑定输入以执行某些操作

<form onsubmit="return false">
        {{input type="text" action="createComment" value=topic id="inputTopic"}}
</form>

Answer 2

历史上，Ember使用以下代码处理了此用例：

<form {{action 'submitForm' on='submit'}}>
  <!-- the rest of your form here -->

  <button type='submit'>Submit</button>
</form>

这可以防止表单刷新页面。

还有另一种方法可以为您提供更多控制权，方法是为您提供事件，以便您自己管理：

<form onsubmit={{action 'submitForm'}}>
  <!-- the rest of your form here -->

  <button type='submit'>Submit</button>
</form>

在这种情况下，您将收到一个活动，并且必须致电event.preventDefault()以停止刷新页面。

actions: {
  submitForm(event) {
    event.preventDefault();
  }
}

Answer 3

我遇到了同样的问题 - 对我有用的是在输入组件中覆盖keyPress事件，如下所示：

keyPress: function (e) {
    var keyCodeEnter = 13;

    if (e.keyCode === keyCodeEnter) {
        return false;
    }
}

希望将来有人会帮助你！：）