Установите фокус клавиатуры на <div> - PullRequest
Новая
       7

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

39 голосов
/ 20 июля 2011

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

<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> отображает данные в верхней части главного экрана. Когда страница генерирует div, я бы хотел установить фокус. Я не могу поместить функцию onLoad в тег body, так как не знаю, когда будут сгенерированы div.

Тэг

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

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

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

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

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

Ответы [ 7 ]

94 голосов
/ 24 июля 2011

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

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

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

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

ОБНОВЛЕНИЕ: добавлено простое демо на http://jsfiddle.net/roberkules/sXj9m/

1 голос
/ 20 июля 2011

Функция, которая динамически генерирует div, будет иметь доступный контекст, чтобы знать, на каком div фокусироваться, после того, как последний div выведет скрипт с scrollTo () для фокусировки на Div вы хотите. Присвойте каждому div свой идентификатор, чтобы вы могли выбрать его из набора. 

Response.Write "
<script language='text/javascript'>
document.getElementById('div#').scrollIntoView();
</script>
"
0 голосов
/ 08 августа 2014

Я решаю это следующим образом: 

<div tabindex="0" >
    <button onclick="element.parentNode.focus();"/>
</div>
0 голосов
/ 27 июля 2011

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

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

и

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

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

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

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

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

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

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

0 голосов
/ 20 июля 2011

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

<div tabindex="0" class="to-focus">TEXT</div>
<script> document.getElementsByClassName('to-focus')[0].focus()</script>
0 голосов
/ 20 июля 2011

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

0 голосов
/ 20 июля 2011

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

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

...