jQuery的.focus()方法并不能真正将焦点聚焦在新创建的元素上。

Question

假设我有这个标记：

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

我想使用jQuery添加一个新的<div>，并将焦点放在这个新元素上。.focus没有反应。

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

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

有任何想法是为什么？

- Sergio del Amo

Answer 1

我认为主要答案是错误的。DIV和P标签可以获得焦点，只需为它们指定tabindex属性即可。例如：

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

一旦指定tabindex，您可以使用.focus()来切换到这些元素或移动焦点。

在这里使用scrollTo插件似乎有点过度杀鸡。

- Michal

---

这帮助我找出如何在树形容器div中处理一些键盘命令。通过将一个keypress事件处理程序分配给一个具有tabIndex值的div，我能够向分层数据编辑器添加键盘命令。 - 3Dave

很棒！就簡單易懂而言，你的解決方案是最好的。我喜歡簡單的東西。如果不必使用脚本就行的話，我更願意避免使用脚本。 - Marcos Buarque

这是一个很棒的解决方案。非常感谢你。 - Corv1nus

如果您不希望干扰页面中选项卡的顺序，则应使用tabindex ="0"。如果您只想用JavaScript焦点聚焦，并使div不能被聚焦，则将tabindex设置为"-1"。TabIndex为-1可以通过JavaScript获得焦点，但不能通过按Tab键获得焦点。 - dturcotte

Answer 2

您的代码没有问题，只是段落或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...
;

- nickf

---

不需要将其附加到 $（'#content'）中，只需将其附加到 $（'#content'）中。 - Vincent Robert

谢谢，已编辑 - 虽然我想在幕后它做的事情是完全相同的... - nickf

Answer 3

这段代码将避免依赖其他插件，使您可以在任何元素上使用它。

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

- User123342234

---

不错的想法。我使用了这个而不是一个新的插件，并将超时设置为0。不知道是否应该将其封装在一个函数中并调用它ScrollTo... - Ian Grainger

是的，你可以那样做，只需要一个 #newP 的变量，这样你就可以在事件上集中任何元素了。 - User123342234

比使用其他插件好多了！太棒了！ - rlc

Answer 4

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

http://localhost/mypage.html#fourthP

- Todd Smith

Answer 5

我认为你要找的是在jQuery中使用“ScrollTo”插件。你可以在这里查看。

你可以指定要滚动的内容...

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

或者只需滚动窗口：

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

有很多不同的方式来指定目标位置，它们包括：

• 一个原始数字
• 一个字符串（如'44'、'100px'、'+=30px'等）
• 一个DOM元素（逻辑上是可滚动元素的子元素）
• 一个选择器，相对于可滚动元素而言
• 一个哈希对象{ top:x, left:y }，其中x和y可以是任何类型的数字/字符串，如上所述。

额外福利：在查找这些信息时，我还发现了LocalScroll和SerialScroll（从一个项目平滑地滚动到下一个项目）。

- Dan

Answer 6

只有表单元素和类似的元素才能获得焦点。如果您想要浏览器滚动到特定段落，jQuery没有“默认”方式，但在 jQuery.ScrollTo 有一个插件，并且在 使用jQuery进行动画滚动 的博客中解释了如何手动实现。

- Guðmundur Bjarni

Answer 7

不要

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

应该这样使用：

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

- Sergio del Amo

---

可能需要tabindex属性。 - iamgopal

Answer 8

您可以指定tabidex，然后将焦点设置到该元素

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

这将适用于无法自行获取焦点的Div表等。

- Avinash