13

假设我有这个标记：

<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>用 jQuery 添加一个新元素并专注于这个新元素。.focus不做任何事情。

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

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

知道为什么吗？

4

8 回答 8

50

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

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

指定 tabindex 后，您可以使用选项卡切换到这些元素或使用.focus()转移焦点。

在这里使用 scrollTo 插件似乎有点矫枉过正。

于 2009-08-31T21:38:50.010 回答
17

您的代码没有问题，只是段落或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-02T16:10:09.797 回答
6

此代码将避免对其他插件的依赖，并允许您在任何元素上使用它。

$('html, body').animate({ scrollTop: $("#newP").offset().top }, 500);
于 2010-07-04T00:48:52.153 回答
5

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

http://localhost/mypage.html#fourthP
于 2008-12-02T16:15:12.067 回答
2

我认为您正在寻找的是在 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（动画从一个项目滚动到下一个项目）。

于 2008-12-02T16:11:22.010 回答
1

只有表单元素等才能获得焦点。如果您希望浏览器向下滚动到该特定段落，则使用 jQuery 没有“默认”方式，但在jQuery.ScrollTo有一个插件，并且在Animated scroll with中解释了如何手动执行此操作的博客jQuery

于 2008-12-02T16:16:18.100 回答
1

代替

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

应该使用它：

window.location.href=window.location.href + "#newP";
于 2008-12-02T16:18:18.330 回答
1

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

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

这适用于无法自行获得焦点的 Div Table 等。

于 2013-01-04T10:21:31.217 回答