JQuery фокус

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>

Я хочу добавить новый div с Javascript и сосредоточиться на этом новом элементе. Фокус ничего не делает.

function addParagraph() {
    var html = "<div id=\"newP\"><p>New paragraph</p></div>";
    $("#content").append(html);
    $("#newP").focus();    
}

Есть идеи?

Answer 1

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

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

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

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

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

Answer 3

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

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

Answer 4

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

http://localhost/mypage.html#fourthP

Answer 5

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

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

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

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

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

Есть много разных способов указать целевую позицию. Это:

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

Бонус: При поиске этой информации я также нашел LocalScroll и SerialScroll (анимирует прокрутку от одного элемента к другому).

Answer 6

вместо

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

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

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

Answer 7

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

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

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

Answer 8

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