2014-09-02 16 views
30

मैं AngularJS का उपयोग करें और मैं इस तरह एक सामान्य इनपुट फ़ील्ड बनाने:Angularjs इनपुट फ़ील्ड फोकस इवेंट?

<input type="text" style="border: none" ng-model="model" > 

मैं निम्न कार्य हैं:

अगर कोई इनपुट क्षेत्र में क्लिक करता है, मैं चाहता हूँ उदाहरण विधि ए के लिए तो फोन वह इस क्षेत्र में पाठ लिखता है और यदि व्यक्ति मेरे पृष्ठ में कहीं क्लिक करता है ताकि इनपुट फ़ील्ड अब केंद्रित न हो, इसे विधि बी को कॉल करना चाहिए। क्या यह कोणीय के साथ संभव है? यदि हां, तो मैं यह कैसे कर सकता हूं? एनजी-फ़ोकस केवल इनपुट ईवेंट पर सक्रिय है लेकिन आउटपुट पर नहीं है ..

मैं इसके साथ कुछ लॉक करना चाहता हूं, विधि ए केवल सत्य के लिए एक मान सेट करता है और विधि बी समान मान को गलत पर सेट करता है। लेकिन मुझे पता होना चाहिए कि इनपुट फ़ील्ड सक्रिय है और कब नहीं।

उत्तर

47

आप ng-focus और ng-blur पर देख रहे हैं।

<input type="text" style="border: none" ng-model="model" ng-focus="A()" ng-blur="B()"> 

एक तरफ ध्यान दें पर, इनलाइन शैलियों के बजाय सीएसएस वर्गों का उपयोग .. :)

या बस तर्क के साथ एक ही विधि कॉल और मूल्य एसीसी सेट: -

<input type="text" style="border: none" ng-model="model" ng-focus="A(true)" ng-blur="A(false)"> 
+1

http://plnkr.co/edit/Wo0Lp0?p=preview – PSL

3

आप पता लगाने के लिए निर्देश कोणीय के एनजी-कलंक को विधि बी बाध्य कर सकते हैं जब एक इनपुट ध्यान केंद्रित खो देता है

<input type='text' ng-focus='methodA()' ng-blur='methodB()' ng-model='model'> 
5

यदि आप कार्यक्षमता का उपयोग कर रहे हैं जो आप अपने पूरे एप्लिकेशन में फ़ील्ड पर आवेदन करना चाहते हैं, तो आप इसे निर्देश में डाल सकते हैं। यहाँ एक उदाहरण है कि कहते हैं और एक सीएसएस ध्यान या एक क्षेत्र के कलंक के आधार पर वर्ग को दूर करता है:

angular.module('myApp').directive('inputFocus', function() { 

var FOCUS_CLASS = 'input-focused'; 
return { 
    restrict: 'A', 
    priority: 1, 
    require: 'ngModel', 
    link: function (scope, element, attrs, ctrl) { 
    element.bind('focus',function() { 
     element.parent().addClass(FOCUS_CLASS);  
    }).bind('blur', function() { 
     element.parent().removeClass(FOCUS_CLASS); 
    }); 
    } 
}; 
}); 
+0

अच्छा और साफ - आप कर सकते हैं 'element.focus()' और 'element.blur() 'का भी उपयोग करें जो jQuery से आते हैं क्योंकि इससे थोड़ा सा साफ हो जाता है। – Boris

संबंधित मुद्दे