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

回答

相關問題