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?
I think the main answer is incorrect. DIV and P tags can receive focus providing you specify a tabindex property for them. ie
<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.
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...
;
此代码将避免依赖于其他插件,并允许您在任何元素上使用它。
$('html, body').animate({ scrollTop: $("#newP").offset().top }, 500);
You need to use a HTML page anchor not focus. Example:
http://localhost/mypage.html#fourthP
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:
Bonus: In digging up this information, I also found LocalScroll and SerialScroll (animates scrolling from one item to the next).
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.
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
Instead of
$("#newP").focus();
it should be used:
window.location.href=window.location.href + "#newP";
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.