ส่งแบบฟอร์มเมื่อกด Enter ด้วย AngularJS

ในกรณีพิเศษนี้ตัวเลือกใดที่ฉันต้องทำเพื่อให้อินพุตเหล่านี้เรียกใช้ฟังก์ชันเมื่อฉันกด 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');
    };
}])

เชิงมุมรองรับสิ่งนี้นอกกรอบ คุณได้ลอง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 มีการตั้งค่าโซลูชันปุ่มกดที่ดีอยู่แล้ว ดูhttp://angular-ui.github.com/

หลังจากเพิ่ม angularUI lib โค้ดของคุณจะเป็นดังนี้:

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

หรือคุณสามารถผูกปุ่มกดสำหรับแต่ละฟิลด์

ดูคำถาม SO นี้เพื่อสร้างคำสั่ง keypres แบบง่าย: ฉันจะตรวจหา onKeyUp ใน AngularJS ได้อย่างไร

แก้ไข (2014-08-28): ในขณะที่เขียนคำตอบนี้ ng-keypress / ng-keyup / ng-keydown ไม่มีอยู่ในคำสั่งดั้งเดิมใน AngularJS ในความคิดเห็นด้านล่าง @ darlan-alves มีทางออกที่ดีงามด้วย:

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

ถ้าคุณต้องการเรียกใช้ฟังก์ชั่นที่ไม่มีฟอร์มคุณสามารถใช้คำสั่ง 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และบัญชีสรุปของฉัน

หากคุณมีเพียงอินพุตเดียวคุณสามารถใช้แท็กแบบฟอร์ม

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

หากคุณมีมากกว่าหนึ่งอินพุตหรือไม่ต้องการใช้แท็กแบบฟอร์มหรือต้องการแนบฟังก์ชันการทำงานของคีย์ - คีย์กับฟิลด์ที่ระบุคุณสามารถอินไลน์เข้ากับอินพุตเฉพาะดังนี้:

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

ฉันต้องการบางสิ่งบางอย่างที่สามารถขยายได้ / ความหมายมากกว่าคำตอบที่ได้รับเล็กน้อยดังนั้นฉันจึงเขียนคำสั่งที่ใช้วัตถุจาวาสคริปต์ในลักษณะเดียวกันกับที่มีในตัวngClass:

HTML

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

ค่าของวัตถุได้รับการประเมินในบริบทของขอบเขตของ directive - ตรวจสอบให้แน่ใจว่าพวกเขาถูกห่อหุ้มด้วยเครื่องหมายคำพูดเดี่ยวมิฉะนั้นฟังก์ชั่นทั้งหมดจะถูกดำเนินการเมื่อโหลดคำสั่ง (!)

ตัวอย่างเช่น: 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]);
                    });
                }
            });
        };
    }]);

อีกวิธีหนึ่งคือการใช้ ng-keypress

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

ส่งอินพุตเมื่อกด Enter ด้วย AngularJS - jsfiddle

คำสั่งดีมากสะอาดและเรียบง่ายพร้อม shift + enter support:

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);
                       }
                 }
            });
        }
    }
});

หากคุณต้องการการตรวจสอบข้อมูลด้วย

<!-- 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ที่จะตรวจสอบแบบฟอร์มก่อนที่จะดำเนินการฟังก์ชั่น คุณจะต้องเพิ่มคุณสมบัติอื่น ๆ เพื่อตรวจสอบซึ่งอยู่นอกเหนือขอบเขตของคำถามนี้

โชคดี.

แค่ต้องการชี้ให้เห็นว่าในกรณีที่มีปุ่มส่งซ่อนคุณสามารถใช้คำสั่ง ngShow และตั้งค่าเป็นเท็จเช่นนั้น:

HTML

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

ใช้ 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 เรียกใช้การส่งแบบฟอร์มใดก็ได้ หากคุณใช้แท็กฟอร์มหนึ่งแท็กสำหรับทั้งคู่คุณจะต้องรวมปุ่มส่ง

จะเล็กลงเล็กน้อยโดยใช้คลาส 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>

FWIW - ต่อไปนี้เป็นคำสั่งที่ฉันใช้สำหรับการยืนยัน / การแจ้งเตือน bootstrap แบบพื้นฐานโดยไม่จำเป็นต้องใช้ <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);
            });
        }
    };
});