Установите фокус клавиатуры на <div>

У меня есть следующий фрагмент кода:

<div id="listbox1div" style="z-index:95; background:white; overflow-y:auto; overflow-x:hidden; width:240; height:314px;">
<a id="focusLink2"></a>
<table id="ptObj_listbox1...

У меня есть страница, которая строит элементы <div> динамически (например, выше). Этот <div> отображает данные поверх главного экрана. Когда страница генерирует divs, я хотел бы установить фокус. Я не могу поместить функцию onLoad в тег body, поскольку я не знаю, когда будут созданы divs.

Тег

A <div> не может иметь фокус, установленный непосредственно на нем. Поэтому я положил пустой тег <a> с идентификатором, который я вызываю в следующей функции:

function setTableFocus(count){
        var flinkText = 'focusLink'+count;
       document.getElementById(flinkText).focus();
}

У меня нет ошибок, и я знаю, что функция вызывается, когда страница отображается (через оповещения). Однако, когда я использую клавиши со стрелками или кнопку ввода, вся страница перемещается (даже не div, представляющий данные).

Когда я нажимаю на один из элементов таблицы (используя мышь). После этого начинает работать событие keydown. Мне бы хотелось, чтобы это было сделано, чтобы представить данные пользователю и автоматически управляться клавиатурой.

Есть ли у кого-нибудь предложения, как я могу это сделать?

Ответы

Ответ 1

вы можете сделать div focusable, если вы добавите атрибут tabindex.

см. http://snook.ca/archives/accessibility_and_usability/elements_focusable_with_tabindex

Значение tabindex может привести к некоторому интересному поведению.

  • Если задано значение "-1", элемент не может быть привязан к табуляции, но фокус может задаваться элементом программно (с использованием element.focus()).
  • Если задано значение 0, элемент можно сфокусировать с помощью клавиатуры и попадает в табулирующий поток документа.
  • Значения, превышающие 0, создают уровень приоритета, причем 1 является самым важным.

UPDATE: добавила простую демонстрацию в http://jsfiddle.net/roberkules/sXj9m/

Ответ 2

Функция, динамически генерирующая divs, будет иметь контекст, доступный для определения того, с каким div следует сфокусироваться, после последнего div вывести a script с помощью scrollTo (), чтобы сосредоточиться на желаемом div. Назначьте каждому div ID, чтобы вы могли выбрать его из набора.

Response.Write "
<script language='text/javascript'>
document.getElementById('div#').scrollIntoView();
</script>
"

Ответ 3

Вы не можете сфокусировать div. Вы имеете в виду фокус ввода?

Во всяком случае, вы можете включить короткий тег script, чтобы сфокусировать что-то прямо в HTML - просто поместите script сразу после div - или даже внутри div.

Ответ 4

Вы управляете функцией asp? Если да, то это было бы самым легким местом для установки фокуса. В противном случае вы можете прослушать событие DOMNodeInserted (обратите внимание: поддержка браузера может отличаться) и установите фокус на div (или его дочерние элементы) на основе соответствующих условий.

Ответ 5

Вы можете использовать getElementsByClassName

<div tabindex="0" class="to-focus">TEXT</div>
<script> document.getElementsByClassName('to-focus')[0].focus()</script>

Ответ 6

Вы имеете в виду, что хотите сфокусировать divs всякий раз, когда он сгенерирован? попробуйте выполнить поиск этих

http://api.jquery.com/focus/

и

http://api.jquery.com/live/

и для нажатия клавиши.

http://api.jquery.com/keypress/

afaik divs и другие элементы могут иметь фокус какого-то типа, например, в wikis, например..

http://en.wikipedia.org/wiki/JavaScript#Cross-site_vulnerabilities

и он будет автоматически прокручиваться там. Я просто не знаю, как это сделать.

а для динамически создаваемых divs и таблиц вы можете использовать функцию jquery live()

Ответ 7

Я решаю, что делать следующее:

<div tabindex="0" >
    <button onclick="element.parentNode.focus();"/>
</div>