Question

我有以下表格：

<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>

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

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

现在，问题出现了。

当我在用户文本字段中输入内容并按Enter键时，它会触发findUser操作，但也会触发formSubmit。据我所知，这是一种形式通常表现的方式。当您在文本字段上按Enter键时，它会提交表单。

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

请帮忙。

Answer 1

一种解决方法是删除表单本身。您可以按下按钮。您可能不得不牺牲一些与表单相关的功能，但仍然可以很好地工作。这是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');
    }
  }
});

Answer 2

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

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

只需添加＆＃39; onkeypress =＆＃34; return event.keyCode！= 13;＆＃34;＆＃39;到表单元素并将{{action}}放在按钮本身上：

＆＃13;

<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>

＆＃13;

Ember.js TextField操作提交表单

2 个答案: