JQuery的焦点

让说我有下一个标记：JQuery的焦点

<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>

我想添加一个新的div使用Javascript并集中在这个新的元素。焦点不做任何事情。

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

有什么想法吗？

来源

2008-12-02 Sergio del Amo

您的代码没有问题，只是段落或div标签无法获得焦点。只能将焦点分配给可与之交互的内容，例如链接，输入元素，文本区域等。

要将窗口滚动到此新添加的元素，可以使用插件，例如ScrollTo。

在一个侧面说明，你的代码可以简化一下：

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... 
;

来源

2008-12-02 16:10:09 nickf

没有必要附加到$（'＃content'），只是appendTo（'＃content'） – 2008-12-09 23:11:22

谢谢，编辑 - 尽管我想在幕后它做的是完全一样的东西... – nickf 2008-12-10 00:41:13

对，它确实:-) – 2008-12-12 18:53:58

我想你在找什么jQuery中使用“ScrollTo”插件。你可以check it out here。

您可以指定滚动什么......

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

或者只是滚动窗口：

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

有指定目标位置许多不同的方式。它们是：

原始数
的字符串（'44' ， '100像素'， '+ = 30PX'，等）
DOM元素（逻辑，的可滚动子元件）
一个选择，那将是相对于可滚动元件
散列{顶部：X，左：Y}，x和y 可以是任何种类的数目/串像上面的。

奖励： 在挖掘这个信息，我还发现LocalScroll和SerialScroll（动画化从一个项目滚动到下一个）。

来源

2008-12-02 16:11:22

+1只是因为scrollTo非常好用而且易于使用。 – Jagd 2011-04-26 18:06:05

您需要使用HTML页面锚点而不是焦点。例如：

http://localhost/mypage.html#fourthP

来源

2008-12-02 16:15:12

只有表单元素等可以获得焦点。如果您希望浏览器向下滚动到特定的段落，还有使用jQuery这样的没有“默认”的方式，但在jQuery.ScrollTo为它的插件和博客，说明如何做手工在Animated scroll with jQuery

来源

2008-12-02 16:16:18

取而代之的

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

它应该被用来：

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

来源

2008-12-02 16:18:18

它可能需要tabindex属性。 – iamgopal 2012-10-13 05:10:59

我认为主要的答案是不正确。 DIV和P标签可以获得焦点，您可以为它们指定tabindex属性。即

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

一旦指定tabindex属性您可以选项卡以这些元素或移焦点与.focus（）。

使用scrollTo插件在这里看起来有点矫枉过正。

来源

2009-08-31 21:38:50 Michal

这帮助我弄清楚如何在树形容器div中处理一些键盘命令。通过为具有tabIndex值的div分配按键事件处理程序，我可以将键盘命令添加到分层数据编辑器。 – 2009-09-04 15:32:22

此代码将避免依赖于其他插件，并允许您在任何元素上拥有它。

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

来源

2010-07-04 00:48:52 User123342234

您可以分配tabidex，然后你可以将焦点设置到该元素

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

这将为股利表等工作，其本身不能获得焦点。

来源

2013-01-04 10:21:31 Avinash

JQuery的焦点

回答

相关问题