Move focus to page element

Question

Possible Duplicate:
Move focus to a particular field

This should be an easy one. I'm trying to set the focus onclick to a <p> element on my page.

My javascript looks like this:

function loadSubmit() {
    if (document.getElementById('uploaded_file').value == "") {
        this.setFocus("name");
    } else {
        var ProgressImage = document.getElementById('progress_image');
        document.getElementById("progress").style.visibility = "visible";
      //document.getElementById("progress").focus(); ?
        setTimeout(function () {
            ProgressImage.src = ProgressImage.src
        }, 100);
    }
}

I would like to shift the focus of the page to 'progress_image' any suggestions on how to accomplish this?

Thanks

What do you mean by "setting focus"? You mean make the page scroll there so the user sees it? — Some Guy, Aug 31 '12 at 18:33
@rlemon Maybe the problem is that it isn't an input field I am trying to move the focus to but rather a
? — Kinburn101, Aug 31 '12 at 18:59
http://stackoverflow.com/questions/6754275/set-focus-to-a-div-classic-asp either way - these questions do exist. you just need a little Google-Fu — rlemon, Aug 31 '12 at 19:06
@rlemon Yes, Google-Fu indeed, just needed help asking the right question. Thanks, I believe this link will help. — Kinburn101, Aug 31 '12 at 19:19

Kinburn101 · Accepted Answer · 2015-03-12T23:02:43.453

Thanks @rlemon for pointing me in the right direction. For those who come across this post seeking the same answer as me; my solution was as follows.

If you need to set focus to an element on your page using an onclick event you can do so by defining your element with tabindex and an ID.

For example I have:

<div id="whatever">sometext or whatever</div>

and I would like the to focus on that div with a submit button or the like. We already know this can be accomplished for input fields by using as other posters had suggested:

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

With a simple change to your div like this:

<div id="whatever" tabindex="-1">sometext or whatever</div>

your div will come into the page's focus with your onclick event. Now knowing this, it is as simple as positioning an empty div, or anchor, or whatever onto your page to achieve your desired results to set the proper focus.

I hope this helps others and thanks again to other posters helping me out with this including: http://snook.ca/archives/accessibility_and_usability/elements_focusable_with_tabindex/

Shocking at how easy it is, to just add the negative tab index! +1! — Sablefoste, Dec 15 '17 at 16:30

Chase · Answer 2 · 2012-08-31T18:36:10.897

4

You can see more about the focus function here: https://developer.mozilla.org/en-US/docs/DOM/element.focus

document.getElementById('fieldId').focus();

edited Aug 31 '12 at 18:36

answered Aug 31 '12 at 18:33

Chase

29,019
1
49
48

10

Please don't send people to w3schools... instead opt for https://developer.mozilla.org/en-US/docs/DOM/element.focus MDN or something similar. – rlemon Aug 31 '12 at 18:39
1

Updated the link and definitely appreciate the advice. I'll be sure not to link to w3schools anymore =) – Chase Aug 31 '12 at 18:41
1

read http://w3fools.com for some reasoning. also their "fake" certifications and misleading information should probably raise some red flags :) – rlemon Aug 31 '12 at 18:42
Really? Wow. Well I'll definitely read more about that once I get home from work. I had no clue. Thanks again and +1 for letting me know! – Chase Aug 31 '12 at 18:44

score 2 · Answer 3 · answered Aug 31 '12 at 18:33

2

document.getElementById('progress_image').focus();

answered Aug 31 '12 at 18:33

Aghilas Yakoub

28,516
5
46
51

Move focus to page element

3 Answers3