为什么在AngularJS表单的文本输入中点击Enter会产生副作用?

现场演示

Consider the following form:

考虑下面的形式:

<form>
  <div>
    <label>Status: </label>
    <button ng-repeat="status in statuses"
            class="btn btn-default"
            ng-model="job.status.id" btn-radio="status.id">
      {{ status.name }}
    </button>
  </div>
  <div>
    <label>Name: </label>
    <input type="text" ng-model="job.name">
  </div>
</form>

When focus is on the name field, and Enter is hit, Status is set to "All Good" for some reason. Live Demo

当焦点在name字段上，并按Enter时，由于某些原因，状态被设置为“All Good”。现场演示

Why is this happening? How could I stop this side effect?

为什么会这样?我怎样才能停止这种副作用呢?

1 个解决方案

#1

From the ngForm docs:

从ngForm文档:

This is because of the following form submission rules in the HTML specification:

这是因为HTML规范中的表单提交规则如下:

If a form has only one input field then hitting enter in this field triggers form submit (ngSubmit)

如果一个表单只有一个输入字段，那么点击这个字段触发器表单提交(ngSubmit)中的enter

if a form has 2+ input fields and no buttons or input[type=submit] then hitting enter doesn't trigger submit

如果表单有两个以上的输入字段，没有按钮或输入[type=submit]，那么按enter不会触发submit

if a form has one or more input fields and one or more buttons or input[type=submit] then hitting enter in any of the input fields will trigger the click handler on the first button or input[type=submit] (ngClick) and a submit handler on the enclosing form (ngSubmit)

如果一个表单有一个或多个输入字段和一个或多个按钮或输入[type=submit]，那么在任何一个输入字段中点击enter将触发第一个按钮上的点击处理程序或输入[type=submit] (ngClick)和一个提交处理程序(ngSubmit表单)

Default type for the button element is "submit" (<button></button> === <button type="submit"></button>). Hence, when you hit enter, the first button is submitted.

按钮元素的默认类型是“submit”( === = )。因此，当您按下enter键时，将提交第一个按钮。

To remedy, just put type="button" on your buttons.

要补救，只需在按钮上键入="button"。

<button 
  ng-repeat="status in statuses"
  class="btn btn-default"
  ng-model="job.status.id" 
  btn-radio="status.id"
  type="button"
>
  {{ status.name }}
</button>

#1