Enter on AngularJS दबाने पर फॉर्म सबमिट करें

Question

इस विशेष मामले में, जब मैं 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');
    };
}])

Answer 1

कोणीय बॉक्स से बाहर का समर्थन करता है। क्या आपने अपने फ़ॉर्म तत्व पर ngSubmit की कोशिश की है ?

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

संपादित करें: सबमिट बटन के संबंध में टिप्पणी के अनुसार, सबमिट बटन दबाए बिना एक फ़ॉर्म सबमिट करके देखें जो इसका समाधान देता है:

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

यदि आप छिपे हुए सबमिट समाधान को पसंद नहीं करते हैं, तो आपको एक कंट्रोलर फ़ंक्शन को एंटर कीपर या कीप इवेंट में बाँधना होगा। इसके लिए सामान्य रूप से एक कस्टम निर्देश की आवश्यकता होती है, लेकिन AngularUI पुस्तकालय में पहले से ही एक अच्छा कीपर समाधान है। Http://angular-ui.github.com/ देखें

कोणीय यूआई को जोड़ने के बाद, आपका कोड कुछ इस तरह होगा:

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

या आप प्रत्येक व्यक्ति के क्षेत्र में प्रवेश कुंजी बांध सकते हैं।

इसके अलावा, एक साधारण की-वर्ड निर्देश बनाने के लिए इस SO प्रश्न को देखें: मैं AngularJS में onKeyUp का कैसे पता लगा सकता हूं?

EDIT (2014-08-28): जिस समय यह उत्तर लिखा गया था, एनजी-कीपर / एनग-कीप / एनजी-कीडाउन का मूल निर्देश के रूप में एंगुलरजेएस में कोई अस्तित्व नहीं था। नीचे दिए गए टिप्पणियों में @ डार्लन-एल्व्स के साथ एक बहुत अच्छा समाधान है:

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

Comments

यह केवल तभी काम करता है जब मेरे पास फॉर्म के अंदर एक सबमिट बटन भी हो।

— अली

यह भी ध्यान दें कि यह एक <form> होना है। यह <someElement एनजी-फॉर्म = "" ... पर काम नहीं करता है।

— जॉन कुल्विनर

बस एक नोट छोड़ना: यदि आप यहां समाप्त हो गए हैं और सबमिट बटन आपके लिए काम नहीं करते हैं, तो आप अपने सबमिट फ़ंक्शन के लिए एक बुरे नाम का उपयोग कर सकते हैं। मैं मूर्खता ng-submit="join()"से एक पंजीकरण नियंत्रक के लिए उपयोग कर रहा था $scope.join = function() {...}और उस फ़ंक्शन का नाम बदलकर foo()फिर से काम करने के लिए एंट्री-बटन प्रस्तुत किया।

— परीक्षक

जिस समय यह उत्तर लिखा गया था, एनजी-कीपर / एनजी-कीपर का अस्तित्व एंगुलर में नहीं था

— 19

ng-keyup="$event.keyCode == 13 && myFunc()"वास्तव में बहुत बढ़िया :)

— गोन्चर डेन्स

Answer 2

यदि आप बिना फॉर्म के फ़ंक्शन को कॉल करना चाहते हैं, तो आप मेरे एनजीटर निर्देश का उपयोग कर सकते हैं:

जावास्क्रिप्ट :

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>

मैं अपने ट्विटर और अपने जिस्ट अकाउंट पर दूसरों के भयानक निर्देश प्रस्तुत करता हूं ।

Comments

क्या आपके पेज पर प्रवेश करने के दौरान किसी भी समय उन्हें ट्रिगर करने के लिए इसे प्राप्त करने का एक चतुर तरीका है?

— डेरेक अडायर

@EpokK मैं पूरे फॉर्म के लिए एंटर कुंजी को निष्क्रिय करना चाहता हूं, मैं यह कैसे कर सकता हूं? (मैं प्रवेश के साथ फार्म जमा करने से बचना चाहता हूं)

— एंटोनियो मैक्स

बहुत अच्छा है, लेकिन AngularJs की प्रतिपूर्ति के अनुसार, आपको निर्देश, सेवाएँ या फ़िल्टर नहीं बनाने चाहिए जो ng- के साथ उपसर्ग कर रहे हों, यदि कोई आधिकारिक विज्ञप्ति बाद में उसी नाम का उपयोग करती है।

— नील एस

महान समाधान। मैंने सिर्फ नाम बदलकर कीबाइंड और इस लाइन को "if (event.which === 13) {" इसको "" अगर (event.which === नंबर (attrs.key)) {"और फिर मेरा इनपुट" < इनपुट प्रकार = "टेक्स्ट" बाइंड-की = "doSomething ()" की = "13"> "ताकि मैं इसे विभिन्न प्रमुख घटनाओं के लिए फिर से उपयोग कर सकूं।

— ब्रायन एफ

महत्वपूर्ण: दोनों keydownऔर keypressघटनाओं को अल्पविराम के बिना जोड़ने के लिए उनका मतलब है कि दोनों एक साथ आग लग सकती हैं। यह $ rootScope को स्पॉन करने की संभावना है: इनप्रोग त्रुटियों। उन दोनों के बीच अल्पविराम जोड़ना एक विघटनकारी बनाता है, और यह केवल $ पच चक्र सुनिश्चित करता है। यह केवल एक ही वर्ण होने से संपादन लागू नहीं कर सका।

— रयान मिलर

Answer 3

यदि आपके पास केवल एक इनपुट है तो आप फॉर्म टैग का उपयोग कर सकते हैं।

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

यदि आपके पास एक से अधिक इनपुट हैं, या फॉर्म टैग का उपयोग नहीं करना चाहते हैं, या किसी विशेष क्षेत्र में एंटर-की कार्यक्षमता को संलग्न करना चाहते हैं, तो आप इसे एक विशिष्ट इनपुट के लिए इनलाइन कर सकते हैं:

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

Comments

यह ऐसा करने का एक चतुर तरीका है, यहां तक ​​कि अपने खुद के निर्देश को लिखने के बिना भी

— चार्ली मार्टिन

यहां तक कि छोटे: <इनपुट एनजी-KeyUp = "$ event.keyCode == 13 && myFunc ()" ... />

— Darlan अल्वेस

महान काम करता है, मैंने एनजी-कीप निर्देश का उपयोग किया है, लेकिन मेरे पास इसके साथ एक बड़ा मुद्दा है, अगर मेरे पास केवल एक पाठ क्षेत्र है, तो वह पूरा फॉर्म (पोस्टबैक) जमा करता है, लेकिन मैं ऐसा नहीं चाहता। मैंने पहले से ही ng-keyup = "$ event.keyCode == 13 && onTextBoxKeyUp ($ घटना)" और फ़ंक्शन में "event.preventDefault ();"; "की कोशिश की, लेकिन मदद नहीं की?

— SharpNoiZy

यह छोटा है लेकिन मेरे दिमाग में DRY का दृष्टिकोण रखते हुए मैं अभी भी निर्देशन बनाऊंगा और इसे निर्देश के साथ उपयोग करूंगा।

— अतुल चौधरी

यह संदर्भ के आधार पर समस्याग्रस्त हो सकता है - मेरे पास एक फॉर्म है जिसमें मेरे पास दो बटन हैं, (इंटरफ़ेस जैसा विज़ार्ड), 'बैक' और 'नेक्स्ट' बटन के साथ, 'एंटर' कुंजी पर क्लिक करने पर डिफ़ॉल्ट व्यवहार वापस बटन है। अब, उपरोक्त कोड का उपयोग करते समय, बैक बटन को CLICKED FIRST मिलता है, और फिर myFunction () कोड कहा जाता है (जो बदले में, विज़ार्ड के अगले भाग में जाता है) इसलिए, मेरा विज़ार्ड कुछ समय के लिए वापस चला जाता है, और फिर यह आगे बढ़ जाता है। @ EpokK का समाधान मेरे लिए एकदम सही काम करता है।

— विश्वजीत वठारकर

Answer 4

मुझे दिए गए उत्तरों की तुलना में कुछ अधिक एक्स्टेंसिबल / शब्दार्थ चाहिए था इसलिए मैंने एक निर्देश लिखा जो एक जावास्क्रिप्ट ऑब्जेक्ट को बिल्ट-इन के समान तरीके से लेता है ngClass:

एचटीएमएल

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

Comments

जब मैं फ़ंक्शन में एक स्ट्रिंग चर जोड़ने की कोशिश करता हूं, तो मुझे एक angluarjs HTML पार्स त्रुटि मिलती है। की-बिंद = "{दर्ज: 'vm.doTheThing (' myVar ')'}"

— मेयलरटायर

यह भी देखा कि अगर मैं एक चर के रूप में किसी ऑब्जेक्ट के साथ फ़ंक्शन का उपयोग करता हूं, तो फ़ंक्शन एक से अधिक बार होता है। जब मैं इसे चलाता हूं तो नीचे दिया गया कोड 2+ आइटम हटा देता है। की-बाइंड = "{दर्ज: 'vm.removeItem (आइटम)'}"

— मेयलरटायर

@MaylorTaylor पहले अंक के लिए, विभिन्न प्रकार के उद्धरणों का उपयोग करें'vm.doTheThing("myVar")'

— AlexFoxGill

Answer 5

एक अन्य दृष्टिकोण एनजी-कीप का उपयोग होगा,

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

Enter on AngularJS - jsfiddle के साथ एक इनपुट सबमिट करें

Answer 6

शिफ्ट + एंटर सपोर्ट के साथ बहुत अच्छा, स्वच्छ और सरल निर्देश:

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

Answer 7

यदि आप डेटा सत्यापन भी चाहते हैं

<!-- 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जो फ़ंक्शन को निष्पादित करने से पहले फॉर्म को मान्य करेगा। आपको सत्यापन के लिए अन्य विशेषताओं को जोड़ना होगा जो इस प्रश्न के दायरे से बाहर है।

शुभ लाभ।

Answer 8

केवल यह बताना चाहता था कि छिपे हुए सबमिट बटन के मामले में, आप बस ngShow निर्देश का उपयोग कर सकते हैं और इसे झूठे पर सेट कर सकते हैं:

एचटीएमएल

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

Comments

+1 <button ng-show="false"></button>और भी छोटा है। अदृश्य बटन का मान सेट करने की आवश्यकता नहीं है।

— मुसाफिर

यह मेरी समझ थी कि एनजी-सबमिट निर्देश को ट्रिगर करने के लिए, इनपुट type="submit"... मुझे लगता है कि मूल्य को अनदेखा किया जा सकता है, लेकिन मेरा मानना ​​है कि पूर्व आवश्यक है।

— लैंड्सको

Answer 9

एनजी-सबमिट का उपयोग करें और दोनों इनपुट को अलग-अलग फॉर्म टैग में लपेटें:

<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 को फ़ॉर्म पर सबमिट करने की अनुमति मिलती है। यदि आप दोनों के लिए एक फॉर्म टैग का उपयोग करते हैं, तो आपको एक सबमिट बटन शामिल करना होगा।

Answer 10

इनलाइन शैलियों को दोहराने के बजाय सीएसएस वर्ग का उपयोग करते हुए थोड़ा neater होगा।

सीएसएस

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

एचटीएमएल

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

Answer 11

एफडब्ल्यूआईडब्ल्यू - यहां एक निर्देश है जिसका उपयोग मैंने बुनियादी पुष्टि / अलर्ट बूटस्ट्रैप मोडल के लिए किया है, बिना किसी की आवश्यकता के <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);
            });
        }
    };
});