JQuery focus

Скажем, у меня следующая разметка:

<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(); 
}

Любая идея?

8 ответов

Я думаю, что главный ответ неверен. Теги DIV и P могут получать фокус, если вы укажете для них свойство tabindex. т.е.

<div tabindex="100">
<p>После того, как указатель tabindex указан, вы можете либо вставить эти элементы, либо сфокусировать фокус с помощью .focus().</p>
<p>Использование плагина scrollTo кажется немного лишним.</p></div>


Нет проблем с вашим кодом, это просто, что абзац абзаца или 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...
;


Этот код избежит зависимостей от других плагинов и позволит вам иметь его на любом элементе.

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


Вам нужно использовать привязку HTML-страницы, а не фокус. Пример:

http://localhost/mypage.html#fourthP


Я думаю, что вы ищете, используя плагин ScrollTo в jQuery. Вы можете проверить здесь.

Вы можете указать, что прокручивать...

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

Или просто прокрутите окно:

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

Существует много разных способов задания целевой позиции. Это:

  • Необработанное число
  • Строка ('44 ',' 100px ',' + = 30px ', и т.д.)
  • Элемент DOM (логически, дочерний элемент прокручиваемый элемент)
  • Селектор, который будет относиться к прокручиваемый элемент
  • A hash {top: x, left: y}, x и y может быть любой номер/строка как указано выше.

Bonus: Выявив эту информацию, я также нашел LocalScroll и SerialScroll (анимирует прокрутку от одного элемента к другому).


Вместо

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

его следует использовать:

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


Только элементы формы и такие могут достичь фокуса. Если вы хотите, чтобы браузер прокручивался вниз до этого конкретного абзаца, для jQuery не существует способа по умолчанию, но для него есть плагин jQuery.ScrollTo и блог, объясняющий, как сделать это вручную в Анимированный свиток с jQuery


Вы можете назначить tabidex, а затем вы можете установить фокус на этот элемент

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

Это будет работать для таблицы Div и т.д., которые сами не могут получить фокус.

licensed under cc by-sa 3.0 with attribution.