2013-11-28 1 views
4

angularjs 지시문을 사용하여 html 형식의 첫 번째 빈 입력에 초점을 맞추려고합니다.AngularJs에서 html 형식의 첫 번째 빈 입력 초점을

.directive('focusFirstEmptyInput', ['$timeout', function ($timeout) { 
     return { 
      restrict: "A", 
      link: function (scope, element, attrs) { 

       var focustElement = function() { 
        var keepGoing = true; 
        angular.forEach(element[0], function (field) { 
         if (!keepGoing) { 
          return; 
         } 

         if (field.tagName.toLowerCase() !== 'input') 
          return; 

         debugger; 
         var fieldValue = field.value; 
         if (!fieldValue) { 
          field.focus(); 
          keepGoing = false; 
         } 
        }); 
       }; 

       $timeout(focustElement, 0); 
      } 
     }; 
    }]); 

나는 모든 양식 요소를 통해 반복과 비어있는 첫 번째 필드에 초점을 시도하고있다 : 여기에 지금까지 기록 된 (그리고 폼 요소에 적용) 한 지침 코드입니다. 그러나 focus()를 호출 할 때 요소에 초점이 맞춰지지 않습니다. 그 이유는 무엇일까요?

UPDATE :

이상한,하지만 난 디버거 문을 제거 (또는 전혀 열려 있지 관리자 모드을)과 자바 스크립트 코드를 일시 정지하지 않는 경우, 먼저 빈 요소에 초점을 것입니다 ... . http://plnkr.co/edit/YT0DoTjUVrrnVwmyrX0v?p=preview

+0

플 런커를 설정합니다. – Stewie

+0

나는 플 런커도 추가했다. 그러나 문제를 발견했습니다. 업데이트 섹션을 확인하십시오. – Koste

+0

그것이 영향을 미치는 브레이크 포인트는 그것이 경쟁 조건이라고 생각하게 만듭니다 ... 그것은 항상 작동한다는 보장이 없다는 것을 의미합니다. – CamHart

답변

0

내가 테스트를했고, $ 제한 시간에서 0 값으로 보인다

Plunker (I 구글 크롬을 사용하고 있습니다). 300 또는 이와 비슷한 것으로 변경하십시오. 300 가지 작업을 통해 개발자 도구를 열어 두거나 열지 않아도됩니다.

저에게 맞습니다.

2

잘못된 위치에 시간 초과가 있습니다. jquery를 사용하여 들어 올릴 수 있습니다. 빈 입력을 필터링하는 방법을 잘 모르겠습니다. for 루프를 사용했기 때문에 (누군가이를 개선하십시오).

이 지시문을 모듈에 추가 한 다음 초점을 설정할 부모 요소에 "focus-first"속성을 추가하십시오.

.directive('focusFirst', ['$timeout', function ($timeout) {    
     return {     
      restrict: "A", 
      link: function (scope, element, attrs) {      
       $timeout(function() { 
        var inputs = element.find('input'), 
         count = inputs.length; 

        for (var i = 0; i < count; i++) { 
         if (inputs[i].value) { 
          continue; 
         } 
         inputs[i].focus(); 
         break; 
        } 
       }, 0); 
      } 
     }; 
    }]); 
관련 문제