input - ईएससी कुंजी के साथ कोणीय/कोणीययूआई में इनपुट इनपुट फ़ील्ड साफ़ करें




angularjs clear (5)

'कीप्रेस' के बजाय 'कीडाउन' या 'कीप' घटनाओं के लिए सुनो:

<input ng-model="search.query" ui-keydown="{esc: 'keyCallback($event)'}" />

मेरे कोणीय ऐप के कई स्थानों पर मुझे ईएससी कुंजी के साथ उपयोगकर्ता से इनपुट साफ़ करने की आवश्यकता है। समस्या यह है कि, मुझे नहीं पता कि टेक्स्ट इनपुट फ़ील्ड्स के साथ इसे कैसे किया जाए (टेक्स्टरेरा ठीक हो रहा है)। यह पहेली देखें:

समस्या का jsFiddle प्रदर्शन

बाइंडिंग:

<input ng-model="search.query" ui-keypress="{esc: 'keyCallback($event)'}" />

मैं कॉलबैक का उपयोग करता हूं:

$scope.keyCallback = function($event) {
  $event.preventDefault();
  $scope.search.query = '';
}

क्या कोई भी, कृपया यह पता लगा सकता है कि मुझे ईएससी कुंजी के साथ टेक्स्ट इनपुट साफ़ करने के लिए क्या करना है ?

समाधान: bmleite द्वारा सलाह दी गई है, आपको 'कीप्रेस' के लिए नहीं बल्कि 'कीडाउन' और 'कीप' के लिए सुनना चाहिए। समस्या यह थी कि 'कीडाउन' फ़ायरफ़ॉक्स में काम नहीं करता है, इसलिए केवल 'कीप' ने ईएससी सुनने के साथ जादू की चाल की। ;)

कामकाजी पहेली: http://jsfiddle.net/aGpNf/190/

समाधान अद्यतन: अंत में मुझे दोनों 'कीडाउन' और 'कीप' घटनाओं को सुनना पड़ा। क्योंकि मेरे मामले में एफएफ पिछले राज्य में ईएससी कीडाउन पर इनपुट फ़ील्ड रीसेट करता है, इसलिए यह मेरे मॉडल को गड़बड़ कर देता है। इसलिए मॉडल की खाली होने पर उचित रूप से 'कीप' मॉडल और 'कीडाउन' चेक साफ़ करता है और उचित कार्रवाई करता है। टेक्स्ट पॉपिंग को वापस रोकने के लिए मुझे इनपुट को मैन्युअल रूप से डिफोकस करने की भी आवश्यकता है।: /


अभी के लिए, कोणीय v4 के साथ, यह काम करता है: (keyup.esc)="callback()"


डिफ़ॉल्ट रूप से एएससी कुंजी प्रेस IE10 / 11 पर textarea को साफ़ करता है। यह एक ब्राउज़र सुविधा है। दूसरों के लिए हम उपयोग कर सकते हैं

 element.bind('keydown keypress', function (e) {
  if(e.which === 27) { // 27 = esc key
   // code for clearing data

    e.preventDefault(); // prevents the default function of the event
  }
});

मैं इस तरह की समस्या को हल करता हूं (नियंत्रक वीएम सिंटेक्स के रूप में):

एचटीएमएल

<input ... ng-model="vm.item" ng-keyup="vm.checkEvents($event)">

नियंत्रक

...
vm.checkEvents = function ($event) {
    if ($event.keyCode == 27) {
        vm.item = "";   
    }
}

स्वीकृत उत्तर आईई 10/11 के लिए काम नहीं करता है । यहां एक अन्य प्रश्न के आधार पर एक समाधान है जो करता है:

आदेश

.directive('escKey', function () {
  return function (scope, element, attrs) {
    element.bind('keydown keypress', function (event) {
      if(event.which === 27) { // 27 = esc key
        scope.$apply(function (){
          scope.$eval(attrs.escKey);
        });

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

HTML:

<input ... ng-model="filter.abc" esc-key="resetFilter()" >

Ctrl

$scope.resetFilter = function() {
  $scope.filter.abc = null;
};




angular-ui