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

Любая идея?

ОТВЕТЫ

Ответ 1

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

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

После того, как указатель tabindex указан, вы можете либо вставить эти элементы, либо сфокусировать фокус с помощью .focus().

Использование плагина scrollTo кажется немного лишним.

Ответ 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...
;

Ответ 3

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

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

Ответ 4

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

http://localhost/mypage.html#fourthP

Ответ 5

Я думаю, что вы ищете, используя плагин 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 (анимирует прокрутку от одного элемента к другому).

Ответ 6

Вместо

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

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

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

Ответ 7

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

Ответ 8

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

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

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