☰

AngularJSでEnterキーを押してフォームを送信する 質問する

tag-icon • tag-icon angularjs forms form-submit keypress enter
AngularJSでEnterキーを押してフォームを送信する 質問する

この特定のケースでは、Enter キーを押したときにこれらの入力が関数を呼び出すようにするには、どのようなオプションがありますか?

HTML:

<form>
    <input type="text" ng-model="name" <!-- Press ENTER and call myFunc --> />
    <br />
    <input type="text" ng-model="email" <!-- Press ENTER and call myFunc --> />
</form>

// Controller //
.controller('mycontroller', ['$scope',function($scope) {
    $scope.name = '';
    $scope.email = '';
    // Function to be called when pressing ENTER
    $scope.myFunc = function() {
       alert('Submitted');
    };
}])

ベストアンサー1

Angularはこれを標準でサポートしています。試してみましたか？ng送信フォーム要素に?

<form ng-submit="myFunc()" ng-controller="mycontroller">
   <input type="text" ng-model="name" />
    <br />
    <input type="text" ng-model="email" />
</form>

編集：送信ボタンに関するコメントによると、送信ボタンなしでEnterキーを押してフォームを送信するこれにより次の解が得られます。

<input type="submit" style="position: absolute; left: -9999px; width: 1px; height: 1px;"/>

非表示の送信ボタンソリューションが気に入らない場合は、コントローラー関数を Enter キー押下またはキーアップイベントにバインドする必要があります。これには通常カスタムディレクティブが必要ですが、AngularUI ライブラリにはすでに優れたキー押下ソリューションが設定されています。Angular 5 の新機能

angularUI ライブラリを追加すると、コードは次のようになります。

<form ui-keypress="{13:'myFunc($event)'}">
  ... input fields ...
</form>

または、Enter キーの押下を各フィールドにバインドすることもできます。

また、簡単な keypres ディレクティブを作成するための次の SO の質問も参照してください。AngularJS で onKeyUp を検出するにはどうすればいいですか?

編集 (2014-08-28): この回答が書かれた時点では、ng-keypress/ng-keyup/ng-keydown は AngularJS のネイティブ ディレクティブとして存在していませんでした。以下のコメントで、@darlan-alves が次のような非常に優れた解決策を提示しています。

<input ng-keyup="$event.keyCode == 13 && myFunc()"... />

おすすめ記事