Autofocus when clicking button to new page (seperate html)

Question

I was able to implement auto-focus when you click a button taking you to the modal. Due to the following code:

AngularJS:

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

HTML:

<input type="text" auto-focus>

However when applying the same logic to input boxes that are available after clicking on a button and going to a separate page, it doesn't seem to work. Has anyone encountered this before or experienced the same issue?

Oh sorry, so another route. Not a modal, not the same page but a little different or refresh. A completely separate page. — gadww gwgwgw, Jul 17 '19 at 14:54
Just for clarification -- are you hiding then showing boxes after a button click? If so the focus would be on the clicked button and you'd need JS to change the focus to the `input` either inside the `ng-click` — solbs, Jul 17 '19 at 15:14
Yes it would be a separate page so the original button is gone, if that is what you mean? — gadww gwgwgw, Jul 17 '19 at 15:19

solbs · Answer 1 · 2019-07-17T15:00:00.047

0

I have used the built in autofocus like this

<input ... autofocus="{{$index==0}}"/>

Have you tried that? No custom directive.

edited Jul 17 '19 at 15:00

answered Jul 17 '19 at 14:58

solbs

940
3
15
29

Is that for html? AngularJS? Sorry new so a bit unsure where that would be placed. – gadww gwgwgw Jul 17 '19 at 14:59
Sorry, it didn't seem to have any affect. – gadww gwgwgw Jul 17 '19 at 15:05
Try seeing which element has the focus. You can `console.log(document.querySelector(":focus"));` – solbs Jul 17 '19 at 15:07

Autofocus when clicking button to new page (seperate html)

1 Answers1