AngularJS में कीपर इवेंट का उपयोग कैसे करें?

Question

मैं नीचे दिए गए टेक्स्टबॉक्स में एंटर की प्रेस इवेंट को पकड़ना चाहता हूं। इसे और अधिक स्पष्ट करने के लिए मैं ng-repeattbody को पॉप्युलेट करने के लिए a का उपयोग कर रहा हूं। यहाँ HTML है:

<td><input type="number" id="closeqty{{$index}}" class="pagination-right closefield" 
    data-ng-model="closeqtymodel" data-ng-change="change($index)" required placeholder="{{item.closeMeasure}}" /></td>

यह मेरा मॉड्यूल है:

angular.module('components', ['ngResource']);

मैं टेबल को आबाद करने के लिए एक संसाधन का उपयोग कर रहा हूं और मेरा नियंत्रक कोड है:

function Ajaxy($scope, $resource) {
//controller which has resource to populate the table 
}

Comments

क्या इनपुट एक फॉर्म के अंदर है?

— कॉलमेकटूटी

नहीं .. इसकी एक तालिका में !!

— वेंकट टाटा

Answer 1

आपको directiveइस तरह एक जोड़ने की जरूरत है :

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

app.directive('myEnter', function () {
    return function (scope, element, attrs) {
        element.bind("keydown keypress", function (event) {
            if(event.which === 13) {
                scope.$apply(function (){
                    scope.$eval(attrs.myEnter);
                });

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

HTML :

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

Comments

@DerekAdair यह निर्देश उस तत्व की घटनाओं keydownऔर keypressघटनाओं के लिए बाध्य करता है जिसे इसे जिम्मेदार ठहराया जाता है। जब घटना प्राप्त होती है तो आपूर्ति की गई अभिव्यक्ति का मूल्यांकन एक $applyब्लॉक के अंदर किया जाता है।

— पीट मार्टिन

इस तरह से कुंजी को परिभाषित करने के लिए अधिक सुरक्षित: var key = typeof event.which === "undefined" ? event.keyCode : event.which;जब तक event.which हर ब्राउज़र द्वारा उपयोग नहीं किया जाता है। यहां टिप्पणियां देखें: stackoverflow.com/a/4471635/2547632

— गेब्रियल

मैं keyupबाँध टेस्ट में भी

— जोड़ूँगा

यह भी ध्यान दें कि एनजी उपसर्ग का उपयोग करने की अनुशंसा नहीं की जाती है, क्योंकि यह भविष्य के एनजी- * निर्देशों के साथ टकरा सकता है। इसके बजाय अपने खुद का उपयोग करें

— Marius Balčytis

अपने बाइंडिंग को नष्ट करने के लिए मत भूलना: गुंजाइश। $ पर ('$ नष्ट', समारोह) () {element.unbind ('keydown');})

— nawlbergs

Answer 2

एक विकल्प मानक निर्देश का उपयोग करना है ng-keypress="myFunct($event)"

फिर आपके नियंत्रक में आपके पास हो सकता है:

...

$scope.myFunct = function(keyEvent) {
  if (keyEvent.which === 13)
    alert('I am an alert');
}

...

Comments

अन्य लोगों को कुछ समय बचाने के लिए, ng-keypressकोणीय 1.0.x का हिस्सा नहीं लगता है, ui-keypress(थोड़ा अलग कॉलिंग शब्दार्थ के साथ) हालांकि उपलब्ध है: angular-ui.github.io/ui-utils

— Cebjyre

मुझे लगता है कि इसके ऊपर की टिप्पणी एक अलग उत्तर पर लक्षित थी। (केवल संदर्भ के लिए।)

— कॉर्नेलियस

मार्टिन कि वास्तव में एक नियंत्रक का कार्य है: यूआई घटनाओं को संभालने के लिए।

— ट्रेवर डे कोएकोक

बेहतर अभी तक, ngKeypress का उपयोग करें और एक कस्टम फ़िल्टर के लिए $ घटना को पास करें।

— मार्टिन

सबसे अच्छा जवाब +1। मुझे अपना निर्देशन क्यों करना चाहिए, अगर कोई एक है, तो पहले से ही कोणीय में शामिल है?

— bFunc

Answer 3

बस कोणीय बिल्ड-इन निर्देश का उपयोग करते हुए मेरा सबसे सरल दृष्टिकोण:

ng-keypress, ng-keydownया ng-keyup।

आमतौर पर, हम कुछ के लिए कीबोर्ड समर्थन जोड़ना चाहते हैं जो पहले से एनजी-क्लिक द्वारा नियंत्रित किया जाता है।

उदाहरण के लिए:

<a ng-click="action()">action</a>

अब, कीबोर्ड सपोर्ट जोड़ें।

प्रवेश कुंजी द्वारा ट्रिगर:

<a ng-click="action()" 
   ng-keydown="$event.keyCode === 13 && action()">action</a>

अंतरिक्ष कुंजी द्वारा:

<a ng-click="action()" 
   ng-keydown="$event.keyCode === 32 && action()">action</a>

स्थान या कुंजी दर्ज करें:

<a ng-click="action()" 
   ng-keydown="($event.keyCode === 13 || $event.keyCode === 32) && action()">action</a>

यदि आप आधुनिक ब्राउज़र में हैं

<a ng-click="action()" 
   ng-keydown="[13, 32].includes($event.keyCode) && action()">action</a>

KeyCode के बारे में अधिक जानकारी:
keyCode को हटा दिया गया है लेकिन अच्छी तरह से समर्थित API है, आप इसके बजाय समर्थित ब्राउज़र में $ evevt.key का उपयोग कर सकते हैं। Https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/key
में और देखें

Comments

विधि $ घटना को अंजाम देने से पहले सशर्त है। जो === 13 और& क्रिया () - धन्यवाद!

— user12121234

'$ event.which' मेरे लिए काम नहीं कर रहा है, लेकिन मुझे '$ event.keyCode' मिला है जो काम कर रहा है।

— कार्ल एडलर

Event.which आईई 9 में अपरिभाषित और की-अप पर अपरिभाषित है।

— एरिक चेन

"पुराने ब्राउज़र जैसे IE9" .. कभी नहीं सोचा था कि यह दिन आएगा :)

— मिहानिया बेल्सिन

किसी ने भी $ sn.etsCode का उपयोग करने के लिए यहां कोड स्निपेट्स को अपडेट क्यों नहीं किया? मैं इसे स्वयं संपादित करूँगा, लेकिन मैं किसी कारण से असमर्थ हूँ।

— नाथन हज़ार्ड

Answer 4

एक और सरल विकल्प:

<input ng-model="edItem" type="text" 
    ng-keypress="($event.which === 13)?foo(edItem):0"/>

और एनजी-यूआई विकल्प:

<input ng-model="edItem" type="text" ui-keypress="{'enter':'foo(edItem)'}"/>

Comments

ng-ui यह अस्पष्ट है, इसके बजाय आपको "UI.Utils" कहना चाहिए या लिंक साझा करना चाहिए: angular-ui.github.io/ui-utils

— पाउलो ओलिवेरा

— ui- बर्तन को

Answer 5

जब मैं एक समान आवश्यकता के साथ एक ऐप का निर्माण कर रहा था, तो मुझे यह पता चला कि उसे निर्देश लिखने की आवश्यकता नहीं है और यह क्या करना है यह बताना अपेक्षाकृत सरल है:

<input type="text" ng-keypress="($event.charCode==13)?myFunction():return" placeholder="Will Submit on Enter">

Comments

सरल और प्रभावी।

— Xplouder

Answer 6

आप विशेषता के रूप में ng-keydown = "myFunction ($ घटना)" का उपयोग कर सकते हैं ।

<input ng-keydown="myFunction($event)" type="number">

myFunction(event) {
    if(event.keyCode == 13) {   // '13' is the key code for enter
        // do what you want to do when 'enter' is pressed :)
    }
}

Answer 7

एचटीएमएल

<textarea id="messageTxt" 
    rows="5" 
    placeholder="Escriba su mensaje" 
    ng-keypress="keyPressed($event)" 
    ng-model="smsData.mensaje">
</textarea>

controller.js

$scope.keyPressed = function (keyEvent) {
    if (keyEvent.keyCode == 13) {
        alert('presiono enter');
        console.log('presiono enter');
    }
};

Answer 8

आप इसे मूल तत्व के नियंत्रक पर भी लागू कर सकते हैं। इस उदाहरण का उपयोग तीर की कुंजियों को दबाकर किसी तालिका में एक पंक्ति को उजागर करने के लिए किया जा सकता है।

app.controller('tableCtrl', [ '$scope', '$element', function($scope, $element) {
  $scope.index = 0; // row index
  $scope.data = []; // array of items
  $scope.keypress = function(offset) {
    console.log('keypress', offset);
    var i = $scope.index + offset;
    if (i < 0) { i = $scope.data.length - 1; }
    if (i >= $scope.data.length) { i = 0; }
  };
  $element.bind("keydown keypress", function (event) {
    console.log('keypress', event, event.which);
    if(event.which === 38) { // up
      $scope.keypress(-1);
    } else if (event.which === 40) { // down
      $scope.keypress(1);
    } else {
      return;
    }
    event.preventDefault();
  });
}]);


<table class="table table-striped" ng-controller="tableCtrl">
<thead>
    <tr>
        <th ng-repeat="(key, value) in data[0]">{{key}}</th>
    </tr>
</thead>
<tbody>
    <tr ng-repeat="row in data track by $index" ng-click="draw($index)" ng-class="$index == index ? 'info' : ''">
        <td ng-repeat="(key, value) in row">{{value}}</td>
    </tr>
</tbody>
</table>

Answer 9

कोशिश कर रहे हैं

ng-keypress="console.log($event)"
ng-keypress="alert(123)"

मेरे लिए कुछ नहीं किया।

Https://docs.angularjs.org/api/ng/directive/ngKeypress पर नमूने को स्ट्रांग करें , जो एनजी-कुंजी = "गिनती = गिनती + 1" करता है, काम करता है।

मुझे एक वैकल्पिक समाधान मिला, जिसमें एंटर दबाएं बटन के एनजी-क्लिक पर क्लिक करें।

<input ng-model="..." onkeypress="if (event.which==13) document.getElementById('button').click()"/>
<button id="button" ng-click="doSomething()">Done</button>

Comments

ng-keypress="console.log('foo')"मेरे लिए भी काम नहीं किया, लेकिन अगर आप ng-keypress="fooMethod()"और आपके नियंत्रक $scope.fooMethod = function() { console.log('fooMethod called'); }में काम करता है।

— ग्राहमफ

Answer 10

<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<body>
<div ng-app="myApp" ng-controller="myCtrl">
Informe your name:<input type="text" ng-model="pergunta" ng-keypress="pressionou_enter($event)" ></input> 
<button ng-click="chamar()">submit</button>
<h1>{{resposta}}</h1> 
</div>
<script>
var app = angular.module('myApp', []);
//create a service mitsuplik
app.service('mitsuplik', function() {
    this.myFunc = function (parametro) {
        var tmp = ""; 
        for (var x=0;x<parametro.length;x++)
            {
            tmp = parametro.substring(x,x+1) + tmp;
            } 
        return tmp;
    }
});
//Calling our service
app.controller('myCtrl', function($scope, mitsuplik) { 
  $scope.chamar = function() { 
        $scope.resposta = mitsuplik.myFunc($scope.pergunta); 
    };
  //if mitsuplik press [ENTER], execute too
  $scope.pressionou_enter = function(keyEvent) {
             if (keyEvent.which === 13) 
                { 
                $scope.chamar();
                }

    }
});
</script>
</body>
</html>

Answer 11

यह एपोकॉक के उत्तर पर एक विस्तार है।

जब एक इनपुट क्षेत्र में प्रवेश किया जाता है तो मुझे स्कोप फ़ंक्शन को कॉल करने की समान समस्या थी। हालाँकि मैं निर्दिष्ट कार्य के लिए इनपुट फ़ील्ड का मान भी पास करना चाहता था । यह मेरा समाधान है:

app.directive('ltaEnter', function () {
return function (scope, element, attrs) {
    element.bind("keydown keypress", function (event) {
        if(event.which === 13) {
          // Create closure with proper command
          var fn = function(command) {
            var cmd = command;
            return function() {
              scope.$eval(cmd);
            };
          }(attrs.ltaEnter.replace('()', '("'+ event.target.value +'")' ));

          // Apply function
          scope.$apply(fn);

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

});

HTML में उपयोग इस प्रकार है:

<input type="text" name="itemname" lta-enter="add()" placeholder="Add item"/>

अपने जवाब के लिए कुदोस से एपोकक।

Comments

<input type="text" name="itemname" ng-model="item.itemname" lta-enter="add(item.itemname)" placeholder="Add item"/>

— aycanadal

Answer 12

इस बारे में क्या?:

<form ng-submit="chat.sendMessage()">
    <input type="text" />
    <button type="submit">
</form>

अब जब आप अपने इनपुट में कुछ लिखने के बाद एंटर कुंजी दबाते हैं, तो फॉर्म को पता है कि इसे कैसे संभालना है।

Comments

कैसे / कहाँ chat.sendMessage()परिभाषित किया गया है

— हारून मैकमिलिन

Answer 13

कोड का कुछ उदाहरण जो मैंने अपनी परियोजना के लिए किया था। मूल रूप से आप अपनी इकाई में टैग जोड़ते हैं। कल्पना कीजिए कि आपके पास इनपुट टेक्स्ट है, टैग नाम दर्ज करने पर आपको ड्रॉप-डाउन मेनू मिलता है जिसमें से चुनने के लिए पहले से लोड किए गए टैग हैं, आप तीर से नेविगेट करते हैं और दर्ज करें का चयन करें:

HTML + AngularJS v1.2.0-rc.3

    <div>
        <form ng-submit="addTag(newTag)">
            <input id="newTag" ng-model="newTag" type="text" class="form-control" placeholder="Enter new tag"
                   style="padding-left: 10px; width: 700px; height: 33px; margin-top: 10px; margin-bottom: 3px;" autofocus
                   data-toggle="dropdown"
                   ng-change="preloadTags()"
                   ng-keydown="navigateTags($event)">
            <div ng-show="preloadedTags.length > 0">
                <nav class="dropdown">
                    <div class="dropdown-menu preloadedTagPanel">
                        <div ng-repeat="preloadedTag in preloadedTags"
                             class="preloadedTagItemPanel"
                             ng-class="preloadedTag.activeTag ? 'preloadedTagItemPanelActive' : '' "
                             ng-click="selectTag(preloadedTag)"
                             tabindex="{{ $index }}">
                            <a class="preloadedTagItem"
                               ng-class="preloadedTag.activeTag ? 'preloadedTagItemActive' : '' "
                               ng-click="selectTag(preloadedTag)">{{ preloadedTag.label }}</a>
                        </div>
                    </div>
                </nav>
            </div>
        </form>
    </div>

Controller.js

$scope.preloadTags = function () {
    var newTag = $scope.newTag;
    if (newTag && newTag.trim()) {
        newTag = newTag.trim().toLowerCase();

        $http(
            {
                method: 'GET',
                url: 'api/tag/gettags',
                dataType: 'json',
                contentType: 'application/json',
                mimeType: 'application/json',
                params: {'term': newTag}
            }
        )
            .success(function (result) {
                $scope.preloadedTags = result;
                $scope.preloadedTagsIndex = -1;
            }
        )
            .error(function (data, status, headers, config) {
            }
        );
    } else {
        $scope.preloadedTags = {};
        $scope.preloadedTagsIndex = -1;
    }
};

function checkIndex(index) {
    if (index > $scope.preloadedTags.length - 1) {
        return 0;
    }
    if (index < 0) {
        return $scope.preloadedTags.length - 1;
    }
    return index;
}

function removeAllActiveTags() {
    for (var x = 0; x < $scope.preloadedTags.length; x++) {
        if ($scope.preloadedTags[x].activeTag) {
            $scope.preloadedTags[x].activeTag = false;
        }
    }
}

$scope.navigateTags = function ($event) {
    if (!$scope.newTag || $scope.preloadedTags.length == 0) {
        return;
    }
    if ($event.keyCode == 40) {  // down
        removeAllActiveTags();
        $scope.preloadedTagsIndex = checkIndex($scope.preloadedTagsIndex + 1);
        $scope.preloadedTags[$scope.preloadedTagsIndex].activeTag = true;
    } else if ($event.keyCode == 38) {  // up
        removeAllActiveTags();
        $scope.preloadedTagsIndex = checkIndex($scope.preloadedTagsIndex - 1);
        $scope.preloadedTags[$scope.preloadedTagsIndex].activeTag = true;
    } else if ($event.keyCode == 13) {  // enter
        removeAllActiveTags();
        $scope.selectTag($scope.preloadedTags[$scope.preloadedTagsIndex]);
    }
};

$scope.selectTag = function (preloadedTag) {
    $scope.addTag(preloadedTag.label);
};

CSS + बूटस्ट्रैप v2.3.2

.preloadedTagPanel {
    background-color: #FFFFFF;
    display: block;
    min-width: 250px;
    max-width: 700px;
    border: 1px solid #666666;
    padding-top: 0;
    border-radius: 0;
}

.preloadedTagItemPanel {
    background-color: #FFFFFF;
    border-bottom: 1px solid #666666;
    cursor: pointer;
}

.preloadedTagItemPanel:hover {
    background-color: #666666;
}

.preloadedTagItemPanelActive {
    background-color: #666666;
}

.preloadedTagItem {
    display: inline-block;
    text-decoration: none;
    margin-left: 5px;
    margin-right: 5px;
    padding-top: 5px;
    padding-bottom: 5px;
    padding-left: 20px;
    padding-right: 10px;
    color: #666666 !important;
    font-size: 11px;
}

.preloadedTagItem:hover {
    background-color: #666666;
}

.preloadedTagItemActive {
    background-color: #666666;
    color: #FFFFFF !important;
}

.dropdown .preloadedTagItemPanel:last-child {
    border-bottom: 0;
}

Comments

मुझे लगता है कि यह एक बुरा समाधान है। नियंत्रक को कीपेस जैसी यूआई चीजों को संभालना नहीं चाहिए।

— माया कथ्रिन एंडरसन

इस उत्तर में बहुत सारे "शोर" होते हैं, बोलने के तरीके में, बहुत सारे मार्कअप होते हैं जो करता है - जहां तक ​​मैं एक नज़र में देख सकता हूं - हाथ में वास्तविक प्रश्न से संबंधित नहीं। उत्तर में कोड को संघनित करने और एक जिस्ट / jsfiddle / plnkr में पूर्ण उदाहरण प्रदान करने के लिए यह अधिक उपयुक्त / उपयोगी हो सकता है।

— कॉर्नेलियस

@MartinAndersen, कोणीय ऐप में एक कुंजी को कहाँ से संभाला जाना चाहिए?

— एमैनगक्स 17

जब मैं इसे देखता हूं तो यह ठीक लगता है। यह मूल रूप से है कि कैसे जेएस ईवेंट मॉडल के साथ हमेशा कीपर को संभाला जाता है।

— माया कैथरीन एंडरसन

Answer 14

मुझे थोड़ी देर हो गई है .. लेकिन मुझे auto-focusइसका उपयोग करने का एक सरल समाधान मिला .. यह पॉपिंग बटन या अन्य के लिए उपयोगी हो सकता है dialog:

<button auto-focus ng-click="func()">ok</button>

यदि आप बटन onस्पेस या एंटर क्लिक करना चाहते हैं तो यह ठीक होना चाहिए ।

Comments

सवाल यह है कि प्रेस के बारे में दर्ज करें और कुछ करें।

— BlaShadow

Answer 15

यहाँ मेरा निर्देश है:

mainApp.directive('number', function () {
    return {
        link: function (scope, el, attr) {
            el.bind("keydown keypress", function (event) {
                //ignore all characters that are not numbers, except backspace, delete, left arrow and right arrow
                if ((event.keyCode < 48 || event.keyCode > 57) && event.keyCode != 8 && event.keyCode != 46 && event.keyCode != 37 && event.keyCode != 39) {
                    event.preventDefault();
                }
            });
        }
    };
});

उपयोग:

<input number />

Answer 16

आप इस तरह एनजी-कीडाउन, एनजी-कीप, एनजी-प्रेस का उपयोग कर सकते हैं।

एक फ़ंक्शन को ट्राइगर करने के लिए:

   <input type="text" ng-keypress="function()"/>

या यदि आपके पास एक कंडोम है जैसे कि वह प्रेस से बच जाता है (27 भागने के लिए महत्वपूर्ण कोड है)

 <form ng-keydown=" event.which=== 27?cancelSplit():0">
....
</form>

Answer 17

मुझे लगता है कि document.bind का उपयोग करना थोड़ा अधिक सुरुचिपूर्ण है

constructor($scope, $document) {
  var that = this;
  $document.bind("keydown", function(event) {
    $scope.$apply(function(){
      that.handleKeyDown(event);
    });
  });
}

नियंत्रक निर्माता को दस्तावेज़ प्राप्त करने के लिए:

controller: ['$scope', '$document', MyCtrl]

Answer 18

(function(angular) {
  'use strict';
angular.module('dragModule', [])
  .directive('myDraggable', ['$document', function($document) {
    return {
      link: function(scope, element, attr) {
         element.bind("keydown keypress", function (event) {
           console.log('keydown keypress', event.which);
            if(event.which === 13) {
                event.preventDefault();
            }
        });
      }
    };
  }]);
})(window.angular);

Answer 19

घटना को प्राप्त करने के लिए आपको बस इतना करना चाहिए:

console.log(angular.element(event.which));

एक निर्देश इसे कर सकता है, लेकिन यह नहीं है कि आप इसे कैसे करते हैं।