用户点击Enter键时嵌入刷新页面上的输入

hc8w905p 于 2022-10-20 发布在其他

关注(0)|答案(3)|浏览(170)

我正在使用Ember CLI，并注意到了奇怪的行为。当用户点击输入并按下回车键时，页面将刷新。
我的页面有这样一个基本元素，它不是任何表单的一部分：

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

我目前通过以下方式为页面提供服务：

ember cli

因此，node正在托管，并且正在进行精彩的实时重新加载，这样当我更新作为底层应用程序一部分的页面时。
那么，是什么导致页面重新加载输入中按下的回车键？它是节点还是实时重新加载？当用户按下回车键，而我在我的HTML虚拟书中错过了该键时，输入是否应该刷新页面？

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

{{action**"myFunction"}}

3条答案

这是因为当您点击Enter键时，表单将被提交，从而导致页面重新加载。您需要做的是在表单上设置onsubmit="return false"，这样提交期间不会发生任何事情。通过添加action属性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();
  }
}

我也遇到了同样的问题-对我有效的是，在输入组件中重写keyPress Event，如下所示：

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

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

希望它能帮助将来的人！：）