Ember.js TextField操作提交表单

Ember.js TextField action submits form

本文关键字：提交 表单 操作 TextField js Ember      更新时间：2023-09-26

我有以下表格：

<form class="form-horizontal" {{action "formSubmit"}}>
    <div class="form-group">
        <label>User:</label>
        {{input type="text" value=user action="findUser"}}
    </div>
    <div class="form-group">
        <label>Notes:</label>
        {{input type="text" value=notes}}
    </div>
    <button type="submit" class="btn btn-primary">Save</button>
</form>

正如你所注意到的，我对这个表单有两个操作：

  1. 当我在用户输入字段上键入并按enter键时，它会触发findUser操作
  2. 当表单提交时，会调用formSubmit操作

现在，问题来了

当我在用户文本字段上键入内容并按enter键时，它会触发findUser操作，但也会触发formSubmit。正如我所知，这就是一个表单的正常行为。当您在文本字段上按enter键时，它会提交表单。

是否有解决此行为的方法？当我在用户文本字段上按enter键时，我希望触发findUser操作，但不提交表单。

请帮忙。

一个解决方法是删除表单本身。您可以对按钮进行操作。您可能不得不牺牲一些与表单相关的功能，但仍然可以很好地工作。这是jsbin。

http://emberjs.jsbin.com/nifim/2/edit

也许还有其他更好的方法。

<div class="form-group">
        <label>User:</label>
        {{input type="text" value=user action="findUser" bubbles=false}}
    </div>
    <div class="form-group">
        <label>Notes:</label>
        {{input type="text" value=notes}}
    </div>
    <button type="submit" class="btn btn-primary" {{action "formSubmit"}}>Save</button>

和javascript

App.IndexController = Ember.Controller.extend({
  actions: {
    findUser: function(){
      console.log('Find User');
    },
    formSubmit: function(){
      console.log('Form Submit');
    }
  }
});

允许使用以下表单的另一种解决方法：

http://emberjs.jsbin.com/povud/1/

只需将'onkeypress="return event.keyCode！=13；"'添加到表单元素中，并将｛｛action｝｝放在按钮本身上：

<form class="form-horizontal" onkeypress="return event.keyCode != 13;">
    <div class="form-group">
        <label>User:</label>
        {{input type="text" value=user action="findUser"}}
    </div>
    <div class="form-group">
        <label>Notes:</label>
        {{input type="text" value=notes}}
    </div>
    <button class="btn btn-primary" {{action "formSubmit"}}>Save</button>
</form>

相关文章：