2016-04-08 26 views
1

editableCellTemplate'da özel bir yönergeye sahibim ve ne zaman hücre seçiliyse ve "F2" ye bastığımda veya bu hücreye çift tıkladığımda özel yönergeyi gösterir ancak yönergenin içindeki metin alanı odağı elde edemez.'editableCellTemplate' içinde kullanılan özel yönergede metin alanlarına odak nasıl ayarlanır?

Odağı, özel yönergenin içindeki metin alanına nasıl ayarlayabilirim?

this fiddle'da 'Cinsiyet' sütununa bakın. 'TAB' ve 'SHIFT + TAB'ın bağımsızlığı,' Toplumsal Cinsiyet 'sütununun altındaki metin alanına odaklanma konusundaki tutarsızlığa düzgün bir şekilde bakmıyor.

cevap

0

Böyle odaklama ve bulanıklık olarak kullanıyor olayları düzelttik.

here numaralı özüm konusuna bakın.

myApp.directive('focusComponent', ['uiGridConstants', 'uiGridEditConstants', 
    function(uiGridConstants, uiGridEditConstants) { 
    return { 
     require: ['?^uiGrid', '?^uiGridRenderContainer'], 
     scope: true, 
     restrict: 'E', 
     template: '<div><div>Some text</div><input type="text"></div>', 
     link: function($scope, element, attrs, controllers) { 
     console.log(element); 
     console.log(arguments); 
     setTimeout(function() { 
      angular.element($(element).children().children()[1])[0].focus(); 
      angular.element($(element).children().children()[1])[0].select(); 
     }, 10); 

     var uiGridCtrl = controllers[0]; 
     var renderContainerCtrl = controllers[1]; 

     //set focus at start of edit 
     $scope.$on(uiGridEditConstants.events.BEGIN_CELL_EDIT, function() { 
      var thisEle = angular.element($(element).children().children()[1])[0]; 
      thisEle.focus(); 
      thisEle.select(); 
      thisEle.style.width = (thisEle.parentElement.offsetWidth - 1) + 'px'; 
      element.on('blur', function(evt) { 
      console.log("blur - element"); 
      $scope.stopEdit(evt); 
      }); 
     }); 


     $scope.stopEdit = function(evt) { 
      // no need to validate a dropdown - invalid values shouldn't be 
      // available in the list 
      $scope.$emit(uiGridEditConstants.events.END_CELL_EDIT); 
     }; 

     element.on('keydown', function(evt) { 
      switch (evt.keyCode) { 
      case uiGridConstants.keymap.ESC: 
       evt.stopPropagation(); 
       $scope.$emit(uiGridEditConstants.events.CANCEL_CELL_EDIT); 
       break; 
      } 
      if (uiGridCtrl && uiGridCtrl.grid.api.cellNav) { 
      evt.uiGridTargetRenderContainerId = renderContainerCtrl.containerId; 
      if (uiGridCtrl.cellNav.handleKeyDown(evt) !== null) { 
       $scope.stopEdit(evt); 
      } 
      } else { 
      //handle enter and tab for editing not using cellNav 
      switch (evt.keyCode) { 
       case uiGridConstants.keymap.ENTER: // Enter (Leave Field) 
       case uiGridConstants.keymap.TAB: 
       evt.stopPropagation(); 
       evt.preventDefault(); 
       $scope.stopEdit(evt); 
       break; 
      } 
      } 
      return true; 
     }); 
     } 
    } 
    } 
]); 
0

bu deneyin:

public setFocus(el: string): any { 
    var vm = this; 
    setTimeout(function() { 
     $("#" + el).focus(); 
     $("#" + el).select(); 

    }, 100); 
} 
+0

Soru, UI Grid adı verilen bir AngularJS eklentisi ile ilgilidir. Cevabınız nasıl alakalı? –

İlgili konular