1. ホーム
  2. angularjs

[解決済み] AngularJSでEnterキーを押したときにフォームを送信する

2022-03-14 18:24:44

質問

この場合、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');
    };
}])

解決方法は?

Angularでは、この機能をすぐに利用できます。試したことがありますか? ngSubmit をフォーム要素に追加しましたか?

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

EDIT: 送信ボタンに関するコメントについて、以下を参照してください。 送信ボタンがなく、エンターキーを押してフォームを送信する場合 という解答を与えています。

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

隠し送信ボタンが気に入らない場合は、Enter キープレスまたはキーアップイベントにコントローラ関数をバインドする必要があります。 これは通常、カスタムディレクティブが必要ですが、AngularUIライブラリにはすでに素晴らしいキープレスのソリューションが設定されています。 以下はその例です。 http://angular-ui.github.com/

angularUI libを追加すると、次のようなコードになります。

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

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

また、簡単なkeypresディレクティブの作成方法については、こちらのSO質問を参照してください。 AngularJSでonKeyUpを検出するにはどうしたらいいですか?

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

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