it-swarm.com.de

Senden Sie das Formular, indem Sie mit AngularJS die Eingabetaste drücken

Welche Optionen muss ich in diesem Fall haben, damit diese Eingänge eine Funktion aufrufen, wenn ich die Eingabetaste drücke?

// 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');
    };
}])
355
ali

Angular unterstützt dies sofort. Haben Sie versucht ngSubmit auf Ihrem Formularelement?

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

BEARBEITEN: Bezüglich des Kommentars zum Senden-Button siehe Senden eines Formulars durch Drücken der Eingabetaste ohne Senden-Button was die Lösung ergibt von:

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

Wenn Ihnen die Lösung für versteckte Senden-Schaltflächen nicht gefällt, müssen Sie eine Controller-Funktion an das Ereignis Enter keypress oder keyup binden. Dies erfordert normalerweise eine benutzerdefinierte Direktive, aber in der AngularUI-Bibliothek ist bereits eine Nice-Tastendrucklösung eingerichtet. Siehe http://angular-ui.github.com/

Nach dem Hinzufügen der angularUI lib würde Ihr Code ungefähr so ​​aussehen:

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

oder Sie können den Enter-Tastendruck an jedes einzelne Feld binden.

Siehe auch diese SO Fragen zum Erstellen einer einfachen keypres Direktive: Wie kann ich onKeyUp in AngularJS erkennen?

EDIT (28.08.2014): Zum Zeitpunkt der Erstellung dieser Antwort war ng-keypress/ng-keyup/ng-keydown in AngularJS nicht als native Direktive vorhanden. In den Kommentaren unten hat @ darlan-alves eine ziemlich gute Lösung mit:

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

514
eterps

Wenn Sie Funktion ohne Formular aufrufen möchten, können Sie meine ngEnter-Direktive verwenden:

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>

Ich übermittle anderen fantastischen Anweisungen auf meinem Twitter und meinem Gist-Konto .

281
EpokK

Wenn Sie nur eine Eingabe haben, können Sie das Formular-Tag verwenden.

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

Wenn Sie mehr als eine Eingabe haben oder das Formular-Tag nicht verwenden möchten oder die Eingabetastenfunktionalität einem bestimmten Feld zuordnen möchten, können Sie sie wie folgt in eine bestimmte Eingabe einbetten:

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

Ich wollte etwas mehr Erweiterbares/Semantisches als die gegebenen Antworten, also schrieb ich eine Direktive, die ein Javascript-Objekt auf ähnliche Weise wie die eingebaute ngClass verwendet:

HTML

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

Die Werte des Objekts werden im Kontext des Geltungsbereichs der Direktive ausgewertet. Stellen Sie sicher, dass sie in einfache Anführungszeichen eingeschlossen sind. Andernfalls werden alle Funktionen ausgeführt, wenn die Direktive geladen wird (!).

So zum Beispiel: esc : 'clear()' statt esc : clear()

Javascript

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

Ein anderer Ansatz wäre die Verwendung von ng-Tastendruck. 

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

Übergeben Sie eine Eingabe, wenn Sie mit AngularJS die Eingabetaste drücken - jsfiddle

23
Partha Roy

Sehr gute, saubere und einfache Anweisung mit Shift + Enter-Unterstützung:

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

Wenn Sie auch Datenvalidierung wünschen

<!-- 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>

Der wichtige Zusatz hier ist $loginForm.$valid, der das Formular vor dem Ausführen der Funktion validiert. Sie müssen zur Validierung andere Attribute hinzufügen, die über den Rahmen dieser Frage hinausgehen.

Viel Glück.

5
Akash

Ich wollte nur darauf hinweisen, dass Sie im Falle eines versteckten Submit-Buttons einfach die ngShow-Direktive verwenden und sie auf false setzen können:

HTML

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

Verwenden Sie ng-submit und wickeln Sie beide Eingaben in separate Formulartags ein:

<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>

Wenn Sie jedes Eingabefeld in ein eigenes Formular-Tag einschließen, kann ENTER in beiden Formularen "Submit" aufrufen. Wenn Sie ein Formular-Tag für beide verwenden, müssen Sie eine Schaltfläche zum Senden hinzufügen.

1
Myclamm

FWIW - Hier ist eine Direktive, die ich für ein einfaches Bootstrap-Modal zur Bestätigung/Warnung verwendet habe, ohne dass ein <form> erforderlich ist.

(Wechseln Sie einfach die jQuery-Click-Aktion nach Ihren Wünschen und fügen Sie data-easy-dismiss zu Ihrem modalen Tag hinzu.)

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

Wird mit einer CSS-Klasse etwas übersichtlicher sein, anstatt Inline-Stile zu wiederholen.

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