Поставить tabindex на элемент div

[ataman]

Здравствуйте

 

Помогите решить задачу. Нужно что при нажатии на клавишу tab фокус определялся на блок див http://joxi.ru/_uqNUxjKTJBvH-c2a_o . Затем если нажать entre открывается дропдаун с выбором локали.

 

Как это сделать ?

<div tabindex="0" class="leng drop">  <div class="curr drop-btn">En</div>  <ul class="drop-list" style="overflow: hidden; display: none;">    <li class="ru">      <a href="http://dev.digitcapital.com/ru/">Ru</a>    </li><li class="en active">    <a href="http://dev.digitcapital.com/en/">En</a>    </li>  </ul></div>

[Switch74]

1. как вариант сделать это придется через js перехватывая нажатие tab и делать костыли имитирующие фокус с невидимой ссылкой и отслеживать фокус на нее

2. а можно просто 'div' заменить на 'a'

[ataman]

1. как вариант сделать это придется через js перехватывая нажатие tab и делать костыли имитирующие фокус с невидимой ссылкой и отслеживать фокус на нее

2. а можно просто 'div' заменить на 'a'

 

я попробовал так:

$(document).ready(function(){$("div, p, h").attr("tabindex","1");//1,2,3 задает в каком порядке будет переход табом если у всех будет 1 то переход будет в том порядке как лежат эти элементы в DOM.    $("div, p, h").on("focus", function(){    $(this).css("border","3px solid");    });});

но при первом нажатии клавиши tab область div сразу выделяется, как исправить. что б она в свою очередь выделялась ?

[Switch74]

В вашем случае получается, что при первом нажатии на tab у вас подсвечивается div с классами class="leng drop" после второго нажатия class="curr drop-btn"

может быть стоит сделать фокус кому-то одному, например

$(".leng").attr("tabindex","1");

ну а вообще как вариант, вам вообще не нужна эта строчка, вы ведь уже указали tabindex

<div tabindex="0" class="leng drop">

еще можно попробовать в css указать

div:focus{    border:3px solid #000;}

но гарантировать, что это будет работать во всех браузерах я не могу

[ataman]

 

еще можно попробовать в css указать

div:focus{    border:3px solid #000;}

но гарантировать, что это будет работать во всех браузерах я не могу

 

 

Указал через стили:

.leng.drop:focus{	border:3px solid #000;}

<div class="leng drop" tabindex="0">  <div class="curr drop-btn open">En</div>  <ul class="drop-list" style="overflow: hidden; display: none;">    <li class="ru">      <a href="http://dev.digitcapital.com/ru/">Ru</a>    </li><li class="en active">    <a href="http://dev.digitcapital.com/en/">En</a>    </li>  </ul></div> 

Рамка появляется, но теперь две проблемы:

1. рамка появляется после того как клавишей tab прощелкал по всем ссылкам на странице, то есть в последнюю очередь. Значения  tabindex ставил и 0 и 1, и 8

2. Когда выделяется рамка, нужно что б при нажатии на entre элемент dropdown с выбором языка локали раскрывался. Может сделать какую то проверку, если элемент принял focus, то открыть дропдавн ? Или можно по другому ?

[Switch74]

1. по поводу данной проблемы не смогу пока помочь, но у меня фокус получил сначала div потом ссылки в Chrome

2. проверять нажатие клавиши enter при фокусе на div обычного keyUp должно хватить