如果我在编辑 input_a
后按下回车按钮,将调用 processInputA()
。 submit()
函数被省略。
input_b
不会发生这种情况:它按预期工作,即使它与 input_a
相似。 submit()
函数按预期调用。
如何防止触发 input_a
之后的按钮?
<form class="uk-form" ng-submit="submit()">
<div class="uk-form-row">
<input type="text"
name="input_a"
ng-model="buffer.inputA" ng-change="reportInputATyped()"
class="uk-width-3-10 uk-form-small">
<button ng-cloak ng-show="inputADirty" class="uk-button uk-button-small" ng-click="processInputA()">Apply</button>
/
<input type="text"
name="input_b"
ng-model="buffer.inputB" ng-change="reportInputBTyped()"
class="uk-width-6-10 uk-form-small">
<button ng-cloak ng-show="inputBDirty" class="uk-button uk-button-small" ng-click="processInputB()">Apply</button>
</div>
// ...further inputs...
</form>
AngularJS:http://angular-meteor.com
最佳答案
<button>
元素似乎是默认类型 submit
如果通过 Chrome 呈现。不是我直觉上预期的那样。
W4Schools.com 文章指出了提示:
Always specify the type attribute for the element. Different browsers may use different default types for the element.
http://www.w3schools.com/tags/att_button_type.asp
如果由 Chrome 处理则有效的版本:
<form class="uk-form" ng-submit="submit()">
<div class="uk-form-row">
<input type="text"
name="input_a"
ng-model="buffer.inputA" ng-change="reportInputATyped()"
class="uk-width-3-10 uk-form-small">
<button type="button" ng-cloak ng-show="inputADirty" class="uk-button uk-button-small" ng-click="processInputA()">Apply</button>
/
<input type="text"
name="input_b"
ng-model="buffer.inputB" ng-change="reportInputBTyped()"
class="uk-width-6-10 uk-form-small">
<button type="button" ng-cloak ng-show="inputBDirty" class="uk-button uk-button-small" ng-click="processInputB()">Apply</button>
</div>
// ...further inputs...
</form>
关于AngularJS:表单中的第一个按钮在按下输入按钮时触发,即使它不是提交按钮,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/32183753/