programing

입력 필드에 포커스를 설정하는 방법

newstyles 2023. 3. 20. 21:44

입력 필드에 포커스를 설정하는 방법

AngularJS에서 입력 필드에 초점을 설정하는 'Angular way'는 무엇입니까?

보다 구체적인 요건:

  1. 모달(Modal)이 열리면 사전 정의된 포커스에 포커스를 설정합니다.<input>아, 아, 아, 아, 아, 아, 아, 네.
  2. ★★★<input>(예를 들어 일부 버튼을 클릭하여) 포커스를 설정합니다.

저는 첫 번째 요건을 충족시키기 위해 노력했습니다.autofocus단, 이것은 Modal을 처음 열었을 때만 동작하며 특정 브라우저에서만 동작합니다(예: Firefox에서는 동작하지 않습니다).

  1. Modal이 열리면 이 Modal 내의 정의된 <입력>에 포커스를 설정합니다.

디렉티브를 정의하고 $watch a property/trigger를 지정함으로써 요소의 포커스를 언제 맞출지 알 수 있습니다.

Name: <input type="text" focus-me="shouldBeOpen">


app.directive('focusMe', ['$timeout', '$parse', function ($timeout, $parse) {
    return {
        //scope: true,   // optionally create a child scope
        link: function (scope, element, attrs) {
            var model = $parse(attrs.focusMe);
            scope.$watch(model, function (value) {
                console.log('value=', value);
                if (value === true) {
                    $timeout(function () {
                        element[0].focus();
                    });
                }
            });
            // to address @blesh's comment, set attribute value to 'false'
            // on blur event:
            element.bind('blur', function () {
                console.log('blur');
                scope.$apply(model.assign(scope, false));
            });
        }
    };
}]);

플런커

$timeout은 렌더링할 수 있는 모달 시간을 주기 위해 필요한 것 같습니다.

「2」<입력>이 표시될 때마다(예를 들면, 몇개의 버튼을 클릭해), 포커스를 설정합니다.

기본적으로 위와 같은 지시문을 작성합니다. 속성을 확인하고 true가핸들러로 ), true를 합니다.element[0].focus()사용 사례에 따라서는 $timeout이 필요할 수도 있고 필요하지 않을 수도 있습니다.

<button class="btn" ng-click="showForm=true; focusInput=true">show form and
 focus input</button>
<div ng-show="showForm">
  <input type="text" ng-model="myInput" focus-me="focusInput"> {{ myInput }}
  <button class="btn" ng-click="showForm=false">hide form</button>
</div>


app.directive('focusMe', function($timeout) {
  return {
    link: function(scope, element, attrs) {
      scope.$watch(attrs.focusMe, function(value) {
        if(value === true) { 
          console.log('value=',value);
          //$timeout(function() {
            element[0].focus();
            scope[attrs.focusMe] = false;
          //});
        }
      });
    }
  };
});

플런커

업데이트 2013년 7월: 일부 사용자가 원래 격리된 범위 지침을 사용하다가 내장된 입력 필드(모달의 입력 필드)에서 문제가 발생하는 것을 보았습니다.새로운 범위(또는 새로운 하위 범위)가 없는 지시는 고통을 어느 정도 완화해야 합니다.그래서 저는 격리 스코프를 사용하지 않도록 답변을 업데이트했습니다.다음은 원래 답변입니다.

격리 스코프를 사용하여 1.에 대한 원래 답변:

Name: <input type="text" focus-me="{{shouldBeOpen}}">


app.directive('focusMe', function($timeout) {
  return {
    scope: { trigger: '@focusMe' },
    link: function(scope, element) {
      scope.$watch('trigger', function(value) {
        if(value === "true") { 
          $timeout(function() {
            element[0].focus(); 
          });
        }
      });
    }
  };
});

플런커.

격리 스코프를 사용하여 2.에 대한 원래 답변:

<button class="btn" ng-click="showForm=true; focusInput=true">show form and
 focus input</button>
<div ng-show="showForm">
  <input type="text" focus-me="focusInput">
  <button class="btn" ng-click="showForm=false">hide form</button>
</div>


app.directive('focusMe', function($timeout) {
  return {
    scope: { trigger: '=focusMe' },
    link: function(scope, element) {
      scope.$watch('trigger', function(value) {
        if(value === true) { 
          //console.log('trigger',value);
          //$timeout(function() {
            element[0].focus();
            scope.trigger = false;
          //});
        }
      });
    }
  };
});

플런커.

디렉티브에서 trigger/focusInput 속성을 리셋해야 하므로 양방향 데이터 바인딩에 '='가 사용됩니다.첫 번째 지시문에서는 '@'로 충분했습니다.또한 '@'를 사용할 때 트리거 값을 "true"와 비교합니다. @는 항상 문자열이 되기 때문입니다.

##(편집: 이 설명 아래에 업데이트된 솔루션을 추가했습니다)

마크 라지콕은...그리고 그의 답변은 타당한 답변이지만 가지고 있다 결함이 있었다(미안해 마크)...

...부울을 사용하여 입력에 초점을 맞춘 후 입력을 흐리게 한 다음 다시 입력에 초점을 맞춥니다. 부울을 false로 리셋하고 나서 $digest, 다시 true로 리셋하지 않으면 동작하지 않습니다. 표현식에서 문자열 비교를 사용하더라도 문자열을 $digest라는 다른 것으로 변경한 후 다시 변경해야 합니다. (이 문제는 블러 이벤트핸들러로 해결했습니다).

그래서 다음 대체 솔루션을 제안합니다.

Angular의 잊혀진 특징인 이벤트를 사용합니다.

JavaScript는 결국 이벤트를 좋아합니다.이벤트는 본질적으로 느슨하게 결합되어 있으며, $digest에 $watch를 추가하지 않아도 됩니다.

app.directive('focusOn', function() {
   return function(scope, elem, attr) {
      scope.$on(attr.focusOn, function(e) {
          elem[0].focus();
      });
   };
});

이제 다음과 같이 사용할 수 있습니다.

<input type="text" focus-on="newItemAdded" />

그리고 앱 어디든지...

$scope.addNewItem = function () {
    /* stuff here to add a new item... */

    $scope.$broadcast('newItemAdded');
};

이런 걸로 모든 걸 다 할 수 있어서 너무 좋아요.먼저, 이미 존재하는 이벤트에 연결할 수 있습니다.또한 앱의 다른 부분이 구독할 수 있는 이벤트를 게시하는 것으로 스마트한 작업을 시작할 수 있습니다.

어쨌든, 이런 종류의 일은 나에게 "사건 주도형"으로 비쳐진다.저는 Angular 개발자로서 $scope 모양의 말뚝을 이벤트 모양의 구멍에 박기 위해 정말 열심히 노력하고 있다고 생각합니다.

이것이 최선의 해결책입니까?몰라.그것은 해결책이다.

최신 솔루션

아래 @Simon Rachlenko님의 코멘트를 받고 조금 방법이 바뀌었습니다.이제 서비스와 "배후" 이벤트를 처리하는 지시문을 조합하여 사용합니다.

그 외에는 위에서 설명한 것과 같은 원금입니다.

여기 간단한 데모 Plunk가 있습니다.

###사용방법

<input type="text" focus-on="focusMe"/>

app.controller('MyCtrl', function($scope, focus) {
    focus('focusMe');
});

###출처

app.directive('focusOn', function() {
   return function(scope, elem, attr) {
      scope.$on('focusOn', function(e, name) {
        if(name === attr.focusOn) {
          elem[0].focus();
        }
      });
   };
});

app.factory('focus', function ($rootScope, $timeout) {
  return function(name) {
    $timeout(function (){
      $rootScope.$broadcast('focusOn', name);
    });
  }
});

당신이 정말 필요한 것은 이것뿐일 때, 나는 다른 대답들 중 몇 가지는 너무 복잡하다는 것을 알았다.

app.directive('autoFocus', function($timeout) {
    return {
        restrict: 'AC',
        link: function(_scope, _element) {
            $timeout(function(){
                _element[0].focus();
            }, 0);
        }
    };
});

사용법은

<input name="theInput" auto-focus>

타임아웃을 사용하여 돔에 있는 것이 렌더링되도록 합니다.제로가 되어 있어도, 적어도 대기하고 있습니다.이렇게 하면 모달 등에서 동작합니다.

이 있습니다.autofocus.

<input type="text" name="fname" autofocus>

http://www.w3schools.com/tags/att_input_autofocus.asp

각도에 내장된 jqlite 기능을 사용할 수도 있습니다.

angular.element('.selector').trigger('focus');

이것은 잘 작동하며 입력 제어에 초점을 맞추는 각진 방식입니다.

angular.element('#elementId').focus()

이것은 작업을 수행하는 순수한 각도 방식은 아니지만 구문은 각도 스타일을 따릅니다.Jquery는 Angular(jQLite => JQuery Light)를 사용하여 간접적으로 직접 DOM에 액세스합니다.

필요한 경우 이 코드를 요소가 직접 접근할 수 있는 간단한 각도 지시어에 쉽게 넣을 수 있습니다.

$timeout은 요소를 창조에 집중하는 좋은 방법이 아니라고 생각합니다.각도 도서의 탁한 깊이에서 파낸 내장된 각도 기능을 사용하는 방법입니다.링크 전 기능과 링크 후 기능을 위해 "link" 속성을 "pre"와 "post"로 분할할 수 있습니다.

작업 예: http://plnkr.co/edit/Fj59GB

// this is the directive you add to any element you want to highlight after creation
Guest.directive('autoFocus', function() {
    return {
        link: {
            pre: function preLink(scope, element, attr) {
                console.debug('prelink called');
                // this fails since the element hasn't rendered
                //element[0].focus();
            },
            post: function postLink(scope, element, attr) {
                console.debug('postlink called');
                // this succeeds since the element has been rendered
                element[0].focus();
            }
        }
    }
});

<input value="hello" />
<!-- this input automatically gets focus on creation -->
<input value="world" auto-focus />

최대 각도JS Directive Docs : https://docs.angularjs.org/api/ng/service/$compile

독자적인 솔루션은 다음과 같습니다.

플런커

var app = angular.module('plunker', []);
app.directive('autoFocus', function($timeout) {
    return {
        link: function (scope, element, attrs) {
            attrs.$observe("autoFocus", function(newValue){
                if (newValue === "true")
                    $timeout(function(){element[0].focus()});
            });
        }
    };
});

HTML:

<button ng-click="isVisible = !isVisible">Toggle input</button>
<input ng-show="isVisible" auto-focus="{{ isVisible }}" value="auto-focus on" />

기능:

ng-show로 표시되므로 입력에 초점을 맞춥니다.여기서는 $watch나 $on을 사용할 수 없습니다.

최근 모델처럼 양방향 바인딩 포커스 디렉티브를 작성했습니다.

다음과 같이 포커스 디렉티브를 사용할 수 있습니다.

<input focus="someFocusVariable">

변수를 someFocusVariable로 true을 사용법FocusVariable false 、 blur 、 FocusVariable 、 false 。마크 라지콕의 첫 번째 대답과 비슷하지만 쌍방향 구속력이 있다.

지시사항은 다음과 같습니다.

function Ctrl($scope) {
  $scope.model = "ahaha"
  $scope.someFocusVariable = true; // If you want to focus initially, set this to true. Else you don't need to define this at all.
}

angular.module('experiement', [])
  .directive('focus', function($timeout, $parse) {
    return {
      restrict: 'A',
      link: function(scope, element, attrs) {
          scope.$watch(attrs.focus, function(newValue, oldValue) {
              if (newValue) { element[0].focus(); }
          });
          element.bind("blur", function(e) {
              $timeout(function() {
                  scope.$apply(attrs.focus + "=false"); 
              }, 0);
          });
          element.bind("focus", function(e) {
              $timeout(function() {
                  scope.$apply(attrs.focus + "=true");
              }, 0);
          })
      }
    }
  });

사용방법:

<div ng-app="experiement">
  <div ng-controller="Ctrl">
    An Input: <input ng-model="model" focus="someFocusVariable">
    <hr>
        <div ng-click="someFocusVariable=true">Focus!</div>  
        <pre>someFocusVariable: {{ someFocusVariable }}</pre>
        <pre>content: {{ model }}</pre>
  </div>
</div>

여기 바이올린이 있습니다.

http://fiddle.jshell.net/ubenzer/9FSL4/8/

부트스트랩 플러그인과 함께 Angular를 사용하는 사용자의 경우:

http://angular-ui.github.io/bootstrap/ #/modal

the the the the the the the the the the the the에 접속할 수 .opened「 」의 「 」의 「 」

modalInstance.opened.then(function() {
        $timeout(function() {
            angular.element('#title_input').trigger('focus');
        });
    });

modalInstance.result.then(function ( etc...

나는 일반적인 표현을 사용하는 것이 유용하다는 것을 알았다.이렇게 하면 입력 텍스트가 유효할 때 포커스가 자동으로 이동됩니다.

<button type="button" moo-focus-expression="form.phone.$valid">

또는 사용자가 고정 길이 필드를 완료하면 자동으로 포커스를 맞춥니다.

<button type="submit" moo-focus-expression="smsconfirm.length == 6">

그리고 물론 로드 후 포커스는

<input type="text" moo-focus-expression="true">

디렉티브 코드:

.directive('mooFocusExpression', function ($timeout) {
    return {
        restrict: 'A',
        link: {
            post: function postLink(scope, element, attrs) {
                scope.$watch(attrs.mooFocusExpression, function (value) {

                    if (attrs.mooFocusExpression) {
                        if (scope.$eval(attrs.mooFocusExpression)) {
                            $timeout(function () {
                                element[0].focus();
                            }, 100); //need some delay to work with ng-disabled
                        }
                    }
                });
            }
        }
    };
});

좀비를 부활시키거나 내 지시사항을 무시하지 않는 것(오케이, 내가 하고 있는 일이 바로 그거야)

https://github.com/hiebj/ng-focus-if

http://plnkr.co/edit/MJS3zRk079Mu72o5A9l6?p=preview

<input focus-if />

(function() {
    'use strict';
    angular
        .module('focus-if', [])
        .directive('focusIf', focusIf);

    function focusIf($timeout) {
        function link($scope, $element, $attrs) {
            var dom = $element[0];
            if ($attrs.focusIf) {
                $scope.$watch($attrs.focusIf, focus);
            } else {
                focus(true);
            }
            function focus(condition) {
                if (condition) {
                    $timeout(function() {
                        dom.focus();
                    }, $scope.$eval($attrs.focusDelay) || 0);
                }
            }
        }
        return {
            restrict: 'A',
            link: link
        };
    }
})();

우선 1.1 로드맵에 초점을 맞추는 것이 공식적인 방법입니다.한편, 설정 포커스를 실장하는 지시문을 작성할 수 있습니다.

둘째, 항목이 표시된 후 포커스를 설정하려면 현재 해결 방법이 필요합니다.Element Focus()를 Focus에 대한 만 하면 .$timeout.

컨트롤러 문제가 하기 때문에, 「DOM」, 「DOM」, 「DOM」, 「DOM」을 것을 합니다.ng-target★★★★

<input type="text" x-ng-model="form.color" x-ng-target="form.colorTarget">
<button class="btn" x-ng-click="form.colorTarget.focus()">do focus</button>

각진 스레드: http://goo.gl/ipsx4 및 자세한 내용은 http://goo.gl/4rdZa에서 확인할 수 있습니다.

은 '보다 낫다'를 만듭니다..focus()합니다.ng-target 해서 이렇게 되면)이 생기게 됩니다..blur() a. a. a..select()(데모: http://jsfiddle.net/bseib/WUcQX/

자신만의 디렉티브를 작성하는 대신 javascript 함수를 사용하여 포커스를 달성하는 것이 가능합니다.

여기 예가 있습니다.

html 파일:

<input type="text" id="myInputId" />

예를 들어 컨트롤러의 javascript 파일에서 포커스를 활성화하는 경우:

document.getElementById("myInputId").focus();

단순히 ng클릭으로 제어되는 단순한 포커스를 원한다면.

HTML:

<input ut-focus="focusTigger">

<button ng-click="focusTrigger=!focusTrigger" ng-init="focusTrigger=false"></button>

지시:

'use strict'

angular.module('focus',['ng'])
.directive('utFocus',function($timeout){
    return {
        link:function(scope,elem,attr){
            var focusTarget = attr['utFocus'];
            scope.$watch(focusTarget,function(value){
                $timeout(function(){
                    elem[0].focus();
                });
            });
        }
    }
});

모달과 잘 어울리는 심플한 것:

.directive('focusMeNow', ['$timeout', function ($timeout)
{
    return {
        restrict: 'A',

        link: function (scope, element, attrs)
        {


            $timeout(function ()
            {
                element[0].focus();
            });



        }
    };
}])

예

<input ng-model="your.value" focus-me-now />

postLinking의 장식된 요소에 초점을 맞추는 지시문을 작성하기만 하면 됩니다.

angular.module('directives')
.directive('autoFocus', function() {
    return {
        restrict: 'AC',
        link: function(_scope, _element) {
            _element[0].focus();
        }
    };
});

다음으로 html에서 다음을 수행합니다.

<input type="text" name="first" auto-focus/> <!-- this will get the focus -->
<input type="text" name="second"/>

postLinking은 HTML 처리에서만 이루어지기 때문에 ng-show가 아닌 modals 및 ng-iff-togled 요소에는 효과가 있습니다.

Mark와 Blesh는 훌륭한 답을 가지고 있지만, Mark의 결점은 Blesh가 지적하는 (구현이 복잡할 뿐만 아니라) 있다.그리고 Blesh의 답변은 프런트엔드에 포커스 요청을 보내는 서비스를 만드는 의미상 오류가 있는 것 같습니다.이것은 그가 정말로 필요로 하는 것은 모든 디렉티브가 경청할 때까지 이벤트를 지연시키는 방법뿐이었습니다.

이 작업을 통해 Blesh의 답변에서 많은 것을 얻어냈지만 컨트롤러 이벤트와 "애프터 로드" 서비스의 의미는 별개입니다.

이를 통해 컨트롤러 이벤트는 특정 요소에 초점을 맞추는 것 이외에 쉽게 잠길 수 있으며, 필요한 경우에만 "애프터 로드" 기능의 오버헤드가 발생할 수 있습니다(많은 경우 그렇지 않을 수 있습니다).

사용.

<input type="text" focus-on="controllerEvent"/>

app.controller('MyCtrl', function($scope, afterLoad) {
  function notifyControllerEvent() {
      $scope.$broadcast('controllerEvent');
  }

  afterLoad(notifyControllerEvent);
});

원천

app.directive('focusOn', function() {
   return function(scope, elem, attr) {
      scope.$on(attr.focusOn, function(e, name) {
        elem[0].focus();
      });
   };
});

app.factory('afterLoad', function ($rootScope, $timeout) {
  return function(func) {
    $timeout(func);
  }
});

도 쓸 수 요.ngModelController1로 작업알 수 없음) 1.6 이상(는)

HTML

<form name="myForm">
    <input type="text" name="myText" ng-model="myText">
</form>

JS

$scope.myForm.myText.$$element.focus();

--

N.B.: 컨텍스트에 따라서는 타임아웃 함수로 랩해야 할 수도 있습니다.

N.B 사용 시.²: ★★★★controllerAs교환만 하면 됩니다.name="myForm"name="vm.myForm" 「JS」라고 합니다.vm.myForm.myText.$$element.focus();.

아마도 ES6 시대의 가장 간단한 해결책일 것입니다.

다음의 1개의 라이너 디렉티브를 추가하면, HTML 의 「autofocus」속성이 Angular.js 로 유효하게 됩니다.

.directive('autofocus', ($timeout) => ({link: (_, e) => $timeout(() => e[0].focus())}))

이제 HTML5 자동 포커스 구문을 다음과 같이 사용할 수 있습니다.

<input type="text" autofocus>

여기에서는 초보자일 뿐이지만, 이 명령어를 사용하여 ui.bootstrap.modal로 동작시킬 수 있었습니다.

directives.directive('focus', function($timeout) {
    return {
        link : function(scope, element) {
            scope.$watch('idToFocus', function(value) {
                if (value === element[0].id) {
                    $timeout(function() {
                        element[0].focus();
                    });
                }
            });
        }
    };
});

$modal.open 메서드에서는 포커스를 배치해야 할 요소를 나타내기 위해 다음 명령을 사용했습니다.

var d = $modal.open({
        controller : function($scope, $modalInstance) {
            ...
            $scope.idToFocus = "cancelaAteste";
    }
        ...
    });

템플릿에는 다음과 같은 내용이 있습니다.

<input id="myInputId" focus />

다음 지시가 나를 위해 효과가 있었다.같은 자동 포커스html 속성을 입력에 사용합니다.

.directive('autofocus', [function () {
    return {
        require : 'ngModel',
        restrict: 'A',
        link: function (scope, element, attrs) {
            element.focus();
        }
    };
}])

modalInstance를 사용하고 있고 개체가 있는 경우 modal을 연 후 "then"을 사용하여 작업을 수행할 수 있습니다.modalInstance를 사용하지 않고 모달 열기 위해 하드코딩된 경우 이벤트를 사용할 수 있습니다.$timeout은 좋은 해결책이 아닙니다.

다음과 같은 작업을 수행할 수 있습니다(Bootstrap3).

$("#" + modalId).on("shown.bs.modal", function() {
    angular.element("[name='name']").focus();
});

modalInstance에서는 모달 열기 후 코드가 어떻게 실행되는지 라이브러리를 볼 수 있습니다.

$timeout을 이렇게 사용하지 마십시오. $timeout은 0, 1, 10, 30, 50, 200 이상이 될 수 있습니다.이것은 클라이언트 컴퓨터와 모달 열기 프로세스에 따라 달라집니다.

$timeout을 사용하지 마십시오.언제 집중할 수 있는지 메서드로 알 수 있습니다.

도움이 되었으면 좋겠습니다. :)

원하는 포커스 요소가 디렉티브템플릿에 삽입되어 있는 경우 위의 답변 중 일부는 동작하지 않습니다.다음 지시문은 단순 요소 또는 지시 주입 요소 모두에 적합합니다(타자기본으로 작성했습니다).내부 포커스 가능 요소에 대한 선택기를 받아들입니다.self 요소에만 초점을 맞출 필요가 있는 경우 - 지시문에 selector 매개 변수를 보내지 마십시오.

module APP.Directives {

export class FocusOnLoadDirective implements ng.IDirective {
    priority = 0;
    restrict = 'A';

    constructor(private $interval:any, private $timeout:any) {

    }

    link = (scope:ng.IScope, element:JQuery, attrs:any) => {
        var _self = this;
        var intervalId:number = 0;


        var clearInterval = function () {
            if (intervalId != 0) {
                _self.$interval.cancel(intervalId);
                intervalId = 0;
            }
        };

        _self.$timeout(function(){

                intervalId = _self.$interval(function () {
                    let focusableElement = null;
                    if (attrs.focusOnLoad != '') {
                        focusableElement = element.find(attrs.focusOnLoad);
                    }
                    else {
                        focusableElement = element;
                    }
                    console.debug('focusOnLoad directive: trying to focus');
                    focusableElement.focus();
                    if (document.activeElement === focusableElement[0]) {
                        clearInterval();
                    }
                }, 100);

                scope.$on('$destroy', function () {
                    // Make sure that the interval is destroyed too
                    clearInterval();
                });

        });
    };

    public static factory = ():ng.IDirectiveFactory => {
        let directive = ($interval:any, $timeout:any) => new FocusOnLoadDirective($interval, $timeout);
        directive.$inject = ['$interval', '$timeout'];
        return directive;
    };
}

angular.module('common').directive('focusOnLoad', FocusOnLoadDirective.factory());

}

단순한 요소의 사용 예:

<button tabindex="0" focus-on-load />

내부 요소의 사용 예(일반적으로 템플릿이 있는 디렉티브와 같은 동적 주입 요소의 경우):

<my-directive focus-on-load="input" />

"input" 대신 임의의 jQuery 셀렉터를 사용할 수 있습니다.

특정 요소에 초점을 맞추려면 다음 방법을 사용할 수 있습니다.

  1. 는 create이 create create called called called called called called called called called 라는 서비스를 만듭니다.focus.

    angular.module('application')
.factory('focus', function ($timeout, $window) {
    return function (id) {
        $timeout(function () {
            var element = $window.document.getElementById(id);
            if (element)
                element.focus();
        });
    };
});

  2. 콜처의 컨트롤러에 삽입합니다.

  3. 이 서비스를 호출합니다.

Mark Rajcok의 focusMe 명령을 편집하여 하나의 요소에 여러 개의 포커스를 적용합니다.

HTML:

<input  focus-me="myInputFocus"  type="text">

AngularJs 컨트롤러:

$scope.myInputFocus= true;

AngulaJS 지침:

app.directive('focusMe', function ($timeout, $parse) {
    return {
        link: function (scope, element, attrs) {
            var model = $parse(attrs.focusMe);
            scope.$watch(model, function (value) {
                if (value === true) {
                    $timeout(function () {
                        scope.$apply(model.assign(scope, false));
                        element[0].focus();
                    }, 30);
                }
            });
        }
    };
});

저는 더 나은 해결책을 찾고 찾지 않고 대신 그것을 만들어야 하는 이 토론에 기여하고 싶습니다.

기준: 1. 재사용 가능성을 높이기 위해 솔루션은 부모 컨트롤러 범위와는 무관해야 합니다.2 .$watch를 사용하여 일부 상태를 모니터링하지 마십시오. 둘 다 속도가 느리고 다이제스트 루프의 크기가 커지고 테스트가 더 어려워집니다.3 .$timeout 또는 $scope를 피하십시오.$digest()는 다이제스트 루프를 트리거합니다.4 .명령이 열린 상태로 사용되는 요소 내에 입력 요소가 있습니다.

제가 가장 마음에 들었던 솔루션은 다음과 같습니다.

지시:

.directive('focusInput', [ function () {
    return {
        scope: {},
        restrict: 'A',
        compile: function(elem, attr) {
            elem.bind('click', function() {
                elem.find('input').focus();                
            });
        }        
    };
}]);

HTML:

 <div focus-input>
     <input/>
 </div>

이게 도움이 됐으면 좋겠어요!

나는 지시가 불필요하다고 생각한다.HTML ID 및 클래스 속성을 사용하여 필요한 요소를 선택하고 서비스에서 document.getElementById 또는 document를 사용하도록 합니다.포커스(또는 jQuery 등가)를 적용할 querySelector.

마크업은 표준 HTML/각도 지시어이며 선택 시 id/class가 추가되어 있습니다.

<input id="myInput" type="text" ng-model="myInputModel" />

컨트롤러 브로드캐스트이벤트

$scope.$emit('ui:focus', '#myInput');

UI 서비스에서는 query Selector를 사용합니다.일치하는 항목이 여러 개 있는 경우(클래스로 인해) 첫 번째 항목만 반환됩니다.

$rootScope.$on('ui:focus', function($event, selector){
  var elem = document.querySelector(selector);
  if (elem) {
    elem.focus();
  }
});

$timeout()을 사용하여 강제로 다이제스트 사이클을 수행할 수 있습니다.

그냥 커피 좀 마시고 있어.

app.directive 'ngAltFocus', ->
    restrict: 'A'
    scope: ngAltFocus: '='
    link: (scope, el, attrs) ->
        scope.$watch 'ngAltFocus', (nv) -> el[0].focus() if nv

타임아웃에 의존하는 것이 좋은 방법인지는 모르겠지만, 이 코드는 angularjs가 DOM을 업데이트한 후에 실행되므로 ng-repeat에 유효합니다.따라서 모든 개체가 있는지 확인합니다.

myApp.directive('onLastRepeat', [function () {
        return function (scope, element, attrs) {
            if (scope.$last) setTimeout(function () {
                scope.$emit('onRepeatLast', element, attrs);
            }, 1);
        };
    }]);
    //controller for grid
    myApp.controller('SimpleController', ['$scope', '$timeout', '$http', function ($scope, $timeout, $http)
    {
        var newItemRemoved = false;
        var requiredAlert = false;
        //this event fires up when angular updates the dom for the last item
        //it's observed, so here, we stop the progress bar
        $scope.$on('onRepeatLast', function (scope, element, attrs) {
            //$scope.complete();
            console.log('done done!');
            $("#txtFirstName").focus();
        });
    }]);

언급URL : https://stackoverflow.com/questions/14833326/how-to-set-focus-on-input-field

'programing' 카테고리의 다른 글

MUI 설치는 React 18에서 작동하지 않습니다.  (0) 2023.03.20
WordPress 플러그인에 CSS 및 jQuery를 포함하는 방법  (0) 2023.03.20
C++ JSON 시리얼화  (0) 2023.03.20
Jasmine - 함수 내의 함수 호출을 감시하려면 어떻게 해야 합니다.  (0) 2023.03.20
jQuery UI 자동 완성 JQuery  (0) 2023.03.20

'programing'의 다른글

  • 현재글입력 필드에 포커스를 설정하는 방법

관련글

댓글

티스토리툴바