Can I focus input elements when scrolling to them?

Question

I replaced my simple

 <a href="#id">Get notified!</a>

with calls to $anchorScroll during my transition to AngularJS as described in Angular JS - Scrolling To An Element By Id and How to handle anchor hash linking in AngularJS

This however has broken a nice feature. The href #id pointed to an input field. The new $anchorScroll behaviour scrolled to this element but did not focus it.

Is there a way to focus it? It makes this feature quite useless if I am unable to jump right to a field and start typing. Edit: Ok, is there a way with AngularJS. I want to get away from plain old JS, as far as I can.

Here is a plunker that is taken from $anchorScroll docs, the target is now an input field, but scrolling to it does not focus it Plunker

score 1 · Accepted Answer · answered Aug 09 '15 at 14:44

1

Use this for focus element:

var el = $window.document.getElementById('id');
el.focus();

Dnt forget add $window service to controller;

answered Aug 09 '15 at 14:44

user3335966

2,673
4
30
33

score 0 · Answer 2 · answered Aug 09 '15 at 14:17

How about this:

// attach an onclick event for every anchor that you have:
for ( every anchor ){
    anchor.onclick = function(){

       var targetID = this.getAttribute( 'href' ).replace( '#', '' ); // or something similar
       var targetElem = document.getElementByID( targetID );

       targetElem.focus();

    }
}

NOTE: This is just pure JS.

Can I focus input elements when scrolling to them?

2 Answers2