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> с jQuery и сосредоточиться на этом новом элементе. .focus ничего не делает.
function addParagraph() {
var html = "<div id=\"newP\"><p>New paragraph</p></div>";
$("#content").append(html);
$("#newP").focus();
}
Есть идеи, почему?
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 8
С вашим кодом проблем нет, просто абзац или тег 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...
;
спасибо, отредактировано - хотя я полагаю, что за кулисами он делает то же самое ...
Я думаю, что вы ищете плагин ScrollTo в jQuery. Вы можете посмотри здесь.
Вы можете указать, что прокручивать ...
$('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 (анимирует прокрутку от одного элемента к другому).
Вам нужно использовать привязку HTML-страницы, а не фокус. Пример:
http://localhost/mypage.html#fourthP
Только элементы формы и тому подобное могут достичь фокуса. Если вы хотите, чтобы браузер прокручивал вниз до этого конкретного абзаца, для jQuery не существует "стандартного" способа сделать это с помощью jQuery, но для этого есть плагин на jQuery.ScrollTo и блог, объясняющий, как это сделать вручную, на Анимированная прокрутка с jQuery
Вместо
$("#newP").focus();
его следует использовать:
window.location.href=window.location.href + "#newP";
может потребоваться свойство tabindex.
Я считаю, что основной ответ неверен. Теги DIV и P могут получить фокус, если вы укажете для них свойство tabindex. т.е.
<div class = "someclass" tabindex = "100">
После указания tabindex вы можете либо перейти к этим элементам, либо сместить фокус с помощью .focus ().
Использование плагина scrollTo здесь кажется излишним.
Это помогло мне понять, как обрабатывать некоторые клавиатурные команды в div-контейнере дерева. Назначив обработчик события нажатия клавиши элементу div со значением tabIndex, я смог добавить команды клавиатуры в редактор иерархических данных.
Идеальный! Ваше - лучшее решение с точки зрения простоты. Я люблю простые вещи. Я предпочитаю избегать сценария, если это можно сделать без него.
Это было отличное решение. Большое Вам спасибо.
Вы должны использовать tabindex = "0", если не хотите нарушать порядок вкладок на странице. Если вы хотите сфокусироваться только с помощью Javascript и сделать div не фокусируемым, поместите tabindex = "- 1". Tabindex -1 может получить фокус с помощью Javascript, но не нажатием клавиши табуляции.
Этот код позволит избежать зависимости от других плагинов и позволит вам иметь его на любом элементе.
$('html, body').animate({ scrollTop: $("#newP").offset().top }, 500);
Хорошая идея. Я использовал это, а не новый плагин, и просто установил тайм-аут на 0. Интересно, следует ли мне обернуть это в функцию и называть ее ScrollTo ...
Да, вы могли бы сделать это и просто иметь переменную для #newP, чтобы вы могли сфокусировать любой элемент на событии.
Намного лучше, чем использовать другой плагин! БОЛЬШОЙ!
Вы можете назначить tabidex, а затем установить фокус на этот элемент
$('#table').attr("tabindex",1).focus();
Это будет работать для Div Table и т. д., Которые не могут получить фокус самостоятельно.
Не нужно добавлять к $ ('# content'), просто appendTo ('# content')