3

編集後にエンターボタンを押すと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

スタイル: http://getuikit.com

4

1 に答える 1

2

<button>submitChrome でレンダリングされた場合、要素はデフォルトのタイプのようです。私が直感的に期待したものではありません。

W4Schools.com の記事には、ヒントが記載されています。

要素には必ず type 属性を指定してください。ブラウザが異なれば、要素に異なるデフォルト タイプが使用される場合があります。

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>
于 2015-08-24T15:13:57.363 に答える