Auto focus on input filed in angular js

Question

I have created a directive for auto focus on text box

 (function () { 'use strict'; angular.module('commonModule').directive('srFocuson',function(){ return { restrict: 'A', require: 'ngModel', link: function (scope, element, attrs) { scope.$watch(attrs.focusMe, function (value) { if (value === true) { console.log('value=', value); element[0].focus(); scope[attrs.focusMe] = false; } }); } }; }); })();

And now i want to bind that directive to my text box.I have tried to bind to input field but its not working.

 <input placeholder="SR ID, SSN/ITIN, or School ID" sr-focuson="focusMe" type="text" id="form_ID" name="searchId" autofocus data-ng-model="vm.searchCriteria.searchId" maxlength="20" class="form-control">

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

please create a fiddle or plunkr, it will help us to help you. — michael
– michael, Commented Jan 24, 2014 at 18:36
Here's the link plnkr.co/edit/A39duXhGvCedAaVuB3uQ?p=preview — JuniorDev
– JuniorDev, Commented Jan 24, 2014 at 18:47

hassassin · Accepted Answer · 2014-01-24 20:36:25Z

I made working fiddle with your idea. http://jsfiddle.net/fLaAG/

It's sort of unclear where you would be updating scope.focusMe so I made an explicit button that would set that value to true.

<button type="button" ng-click="Focus()" type="button">Focus</button> ... $scope.Focus = function() { $scope.focusMe = true; };

Also I'm setting up an isolate scope, so I can just watch string I give it.

scope: { focusMe: '=focusOn' },

Hope this helps

Cody Moniz · Accepted Answer · 2014-09-02 21:37:40Z

Here is a method using built-in angular functionality, dug out from the murky depths of the angular docs. Notice how the "link" attribute can be split into "pre" and "post", for pre-link and post-link functions.

Working Example: 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 />

Full AngularJS Directive Docs: https://docs.angularjs.org/api/ng/service/$compile

I would like to add a ; after "return {}" for the code to pass jslint, but StackOverflow doesn't allow me to do 1 letter edits =/
added the semicolon. @hoeni, it seems to be working on my firefox

Collectives™ on Stack Overflow

Auto focus on input filed in angular js

2 Answers 2

Comments

2 Comments

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

2 Comments

Related