web-dev-qa-db-ja.com

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

この場合、Enterを押したときにこれらの入力が関数を呼び出すようにするには、どのようなオプションがありますか。

// HTML view //
<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');
    };
}])
functionangularjscallkeypressenter
358
ali

Angularは箱から出してこれをサポートします。あなたのフォーム要素で ngSubmit を試しましたか？

<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ライブラリにはすでにNice keypressソリューションが設定されています。 http://angular-ui.github.com/ を参照してください。

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()"... />

511
eterps

あなたがフォームなしでfunctionを呼び出したいなら、あなたは私のngEnterディレクティブを使うことができます：

Javascript ：

angular.module('yourModuleName').directive('ngEnter', function() {
        return function(scope, element, attrs) {
            element.bind("keydown keypress", function(event) {
                if(event.which === 13) {
                    scope.$apply(function(){
                        scope.$eval(attrs.ngEnter, {'event': event});
                    });

                    event.preventDefault();
                }
            });
        };
    });

_ html _ ：

<div ng-app="" ng-controller="MainCtrl">
    <input type="text" ng-enter="doSomething()">    
</div>

私は 私のTwitter そして私の Gistアカウント で他の素晴らしいディレクティブを提出します。

281
EpokK

入力が1つしかない場合は、formタグを使用できます。

<form ng-submit="myFunc()" ...>

複数の入力がある場合、またはformタグを使用したくない場合、またはキー入力機能を特定のフィールドに添付したい場合は、次のようにしてそれを特定の入力にインライン化できます。

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

私は与えられた答えよりももう少し拡張しやすい/意味的なものが欲しかったので、組み込みのngClassと同様の方法でjavascriptオブジェクトを取るディレクティブを書きました：

HTML

<input key-bind="{ enter: 'go()', esc: 'clear()' }" type="text"></input>

オブジェクトの値はディレクティブのスコープの文脈で評価されます - それらが一重引用符で囲まれていることを確認してください。そうしないと、ディレクティブがロードされたときにすべての関数が実行されます。

だから、例えば：esc : 'clear()'の代わりにesc : clear()

ジャバスクリプト

myModule
    .constant('keyCodes', {
        esc: 27,
        space: 32,
        enter: 13,
        tab: 9,
        backspace: 8,
        shift: 16,
        ctrl: 17,
        alt: 18,
        capslock: 20,
        numlock: 144
    })
    .directive('keyBind', ['keyCodes', function (keyCodes) {
        function map(obj) {
            var mapped = {};
            for (var key in obj) {
                var action = obj[key];
                if (keyCodes.hasOwnProperty(key)) {
                    mapped[keyCodes[key]] = action;
                }
            }
            return mapped;
        }

        return function (scope, element, attrs) {
            var bindings = map(scope.$eval(attrs.keyBind));
            element.bind("keydown keypress", function (event) {
                if (bindings.hasOwnProperty(event.which)) {
                    scope.$apply(function() {
                         scope.$eval(bindings[event.which]);
                    });
                }
            });
        };
    }]);
33
AlexFoxGill

もう1つの方法はng-keypressを使うことです。

<input type="text" ng-model="data" ng-keypress="($event.charCode==13)? myfunc() : return">

AngularJSでEnterキーを押して入力を送信する - jsfiddle

23
Partha Roy

Shift + enterがサポートされた、非常に優れたクリーンでシンプルなディレクティブ。

app.directive('enterSubmit', function () {
    return {
        restrict: 'A',
        link: function (scope, elem, attrs) {
            elem.bind('keydown', function(event) {
                 var code = event.keyCode || event.which;
                 if (code === 13) {
                       if (!event.shiftKey) {
                            event.preventDefault();
                            scope.$apply(attrs.enterSubmit);
                       }
                 }
            });
        }
    }
});
14
Vlatko

データ検証も必要な場合 

<!-- form -->
<form name="loginForm">
...
  <input type="email" ng-keyup="$loginForm.$valid && $event.keyCode == 13 && signIn()" ng-model="email"... />
  <input type="password" ng-keyup="$loginForm.$valid && $event.keyCode == 13 && signIn()" ng-model="password"... />
</form>

ここで重要な追加は$loginForm.$validで、これはfunctionを実行する前にフォームを検証します。この質問の範囲を超えた検証のために他の属性を追加する必要があります。

がんばろう。

5
Akash

隠された送信ボタンがある場合は、ng Showディレクティブを使用して次のようにfalseに設定することができます。

HTML

<form ng-submit="myFunc()">
    <input type="text" name="username">
    <input type="submit" value="submit" ng-show="false">
</form>
2
landesko

Ng-submitを使用して、両方の入力を別々のフォームタグにラップするだけです。

<div ng-controller="mycontroller">

  <form ng-submit="myFunc()">
    <input type="text" ng-model="name" <!-- Press ENTER and call myFunc --> />
  </form>

  <br />

  <form ng-submit="myFunc()">
    <input type="text" ng-model="email" <!-- Press ENTER and call myFunc --> />
  </form>

</div>

各入力フィールドをそれぞれ独自のフォームタグで囲むと、Enterキーを押すとどちらのフォームでもsubmitを実行できます。両方に1つのフォームタグを使用する場合は、送信ボタンを含める必要があります。

1
Myclamm

FWIW - これは私が<form>を必要とせずに基本的な確認/警告ブートストラップモーダルのために使ったディレクティブです。

（jQueryのクリックアクションを好きなように切り替えて、モーダルタグにdata-easy-dismissを追加するだけです）

app.directive('easyDismiss', function() {
    return {
        restrict: 'A',
        link: function ($scope, $element) {

            var clickSubmit = function (e) {
                if (e.which == 13) {
                    $element.find('[type="submit"]').click();
                }
            };

            $element.on('show.bs.modal', function() {
                $(document).on('keypress', clickSubmit);
            });

            $element.on('hide.bs.modal', function() {
                $(document).off('keypress', clickSubmit);
            });
        }
    };
});
0
Andrew Appleby

インラインスタイルを繰り返すのではなく、CSSクラスを使用することで少しきれいになります。

_ css _ 

input[type=submit] {
    position: absolute;
    left: -9999px;
}

_ html _ 

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