jQuery .focus doesn’t actually focus a newly created element

Question

Let’s say I have this markup:

<div id="content">
  <div id="firstP"><p>First paragraph</p></div>
  <div id="secondP"><p>Second paragraph</p></div>
  <div id="thirdP"><p>Third paragraph</p></div>
  <div id="fourthP"><p>Fourth paragraph</p></div>
</div>

I want to add a new <div> with jQuery and focus on this new element. .focus does not do anything.

function addParagraph() {
  var html = "<div id=\"newP\"><p>New paragraph</p></div>";

  $("#content").append(html);
  $("#newP").focus();    
}

Any idea why?

score 50 · Answer 1 · answered Aug 31 '09 at 21:38

50

I think the main answer is incorrect. DIV and P tags can receive focus providing you specify a tabindex property for them. i.e.

<div class="someclass" tabindex="100">

Once the tabindex is specified you can either tab to these elements or shift focus with .focus() .

Using a scrollTo plugin seems like a bit of an overkill here.

answered Aug 31 '09 at 21:38

Michal

501
4
2

This helped me figure out how to process some keyboard commands in a tree container div. By assigning a keypress event handler to a div with a tabIndex value, I was able to add keyboard commands to a hierarchical data editor. – 3Dave Sep 04 '09 at 15:32
Perfect! Yours is the best solution in terms of being simple. I like simple stuff. I prefer to avoid a script if it can be done without it. – Marcos Buarque Oct 21 '09 at 17:41
This was a great solution. Thank you very much. – Corv1nus Aug 03 '11 at 20:26
5

You should use tabindex="0" if you don't want to disturb the order of the tabs in the page. If you only want to give focus with Javascript, and make the div not focusable, put tabindex="-1". Tabindex -1 can receive focus by Javascript, but not by hitting the tab key. – dturcotte Jun 01 '12 at 15:04

nickf · Answer 2 · 2008-12-10T00:40:41.243

17

There's no problem with your code, it's just that a paragraph or div tag can't receive focus. Focus can only be given to things you can interact with, such as links, input elements, textareas, etc.

To scroll the window to this newly added element, you can use a plugin such as ScrollTo.

On a side note, your code could be simplified a bit:

var html = "<div id=\"newP\"><p>New paragraph</p></div>";
$("#content").append(html);
$("#newP p").focus();

var html = "<div id=\"newP\"><p>New paragraph</p></div>";
$(html)
    .appendTo('#content')
    .focus()   // or scrollTo(), now...
;

edited Dec 10 '08 at 00:40

answered Dec 02 '08 at 16:10

nickf

537,072
198
649
721

No need to append to $('#content'), just appendTo('#content') – Vincent Robert Dec 09 '08 at 23:11
thanks, edited - though i suppose that behind the scenes it does the exact same thing... – nickf Dec 10 '08 at 00:41

score 6 · Answer 3 · answered Jul 04 '10 at 00:48

6

This code will avoid dependencies on other plugins and allow you to have it on any element.

$('html, body').animate({ scrollTop: $("#newP").offset().top }, 500);

answered Jul 04 '10 at 00:48

User123342234

1,455
14
17

Nice idea. I used this rather than a new plugin and just set the timeout to 0. Wonder if I should wrap that up in a function and call it ScrollTo... – Ian Grainger Aug 17 '10 at 16:55
Yeah you could do that and just have a variable for the #newP so you could focus any element on event. – User123342234 Aug 18 '10 at 22:36
1

So much better than use another plugin! GREAT! – rlc Nov 27 '10 at 17:49

score 5 · Answer 4 · answered Dec 02 '08 at 16:15

5

You need to use a HTML page anchor not focus. Example:

http://localhost/mypage.html#fourthP

answered Dec 02 '08 at 16:15

Todd Smith

17,084
11
59
78

Dan Esparza · Answer 5 · 2008-12-02T16:25:13.013

I think what you're looking for is using the 'ScrollTo' plugin in jQuery. You can check it out here.

You can specify what to scroll...

$('div.pane').scrollTo(...);//all divs w/class pane

Or just scroll the window:

$.scrollTo(...);//the plugin will take care of this

There are many different ways to specify the target position. These are:

A raw number
A string('44', '100px', '+=30px', etc )
A DOM element (logically, child of the scrollable element)
A selector, that will be relative to the scrollable element
A hash { top:x, left:y }, x and y can be any kind of number/string like above.

Bonus: In digging up this information, I also found LocalScroll and SerialScroll (animates scrolling from one item to the next).

score 1 · Answer 6 · answered Jan 04 '13 at 10:21

1

You can assign tabidex and then you can set focus to that element

$('#table').attr("tabindex",1).focus();

This will work for Div Table etc which can't get focus by itself.

answered Jan 04 '13 at 10:21

Avinash

173
1
4
17

score 1 · Answer 7 · answered Dec 02 '08 at 16:16

Only form elements and such can attain focus. If you want the browser to scroll down to that particular paragraph, there is no "default" way of doing so with jQuery, but there is a plugin for it at jQuery.ScrollTo and a blog explaining how to do it manually at Animated scroll with jQuery

score 1 · Answer 8 · answered Dec 02 '08 at 16:18

1

Instead of

$("#newP").focus();

it should be used:

window.location.href=window.location.href + "#newP";

answered Dec 02 '08 at 16:18

Sergio del Amo

76,835
68
152
179

it may need tabindex property. – iamgopal Oct 13 '12 at 05:10

jQuery .focus doesn’t actually focus a newly created element

8 Answers8

Linked