当用户按下Enter键时，Ember刷新页面上的输入

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

我的页面有这样一个基本元素，它不是任何形式的一部分：

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

我目前通过提供该页面

ember cli

所以node正在托管，并有一个奇特的实时重载功能，这样当我更新一个页面时，它就是底层应用程序的一部分。

那么，是什么导致页面重新加载输入中按下的回车键呢？它可能是节点还是实时重新加载？当用户按下回车键时，输入是否应该刷新页面，而我在HTML for dummies书中错过了这一点？

**更好的是，我如何拦截并通过调用函数

{{action** "myFunction"}}

之所以会发生这种情况，是因为当您点击Enter时，表单会被提交，从而导致页面重新加载。您需要做的是在表单上设置onsubmit="return false"，这样在提交过程中就不会发生任何事情。您可以通过添加操作属性action="doSomething" 来绑定输入以执行某些操作

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

编辑：在Ember 3+中，您现在使用{{on}}修饰符来设置元素上的事件。

<form {{on 'submit' this.submitForm}}>
  <!-- the rest of your form here -->
  <button type='submit'>Submit</button>
</form>

而像这样定义的动作

@action
submitForm(event) {
  event.preventDefault();
  // Your code
}

从历史上看，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();
  }
}

这是两者的一个运行示例：https://ember-twiddle.com/827820958e054f7af57b7677630729fc?openFiles=controllers.application.js%2C

我遇到了同样的问题-对我来说有效的是覆盖输入组件中的keyPress Event，如下所示：

keyPress: function (e) {
    var keyCodeEnter = 13;
    if (e.keyCode === keyCodeEnter) {
        return false;
    }
}

希望它能在未来帮助到别人！：）

相关内容