День добрый всем!
Задача : div должен получать фокус , (путем перебора элементов на странице клавишей Tab) но не отображать его. На div повешено событие onkeydown, обрабатывающее нажатия клавиш - это нужно для компонента , находящегося внутри div.(дерево элементов)
Чтобы div мог получать фокус , выставляем у него tabIndex="0"
Чтобы фокус визуально не отображался :
ie - hidefocus="true"
FF,Chrome,Safari outline="none"
(в примере эти стили опущены, т.к. на Оперу не действуют)
Везде это работает как надо , кроме Opera.
Div,получая фокус выделяет все свое содержимое и рисует вокруг себя жирную синюю рамку. Стилями эти вещи убрать не смог. Природа этого дела - выделение в документе. Если убрать выделение - перестает работать "onkeydown", хотя див все еще остается активным элементом документа.
Что посоветуете ?
Код для оперы:
<body>
<div tabIndex="0" style="border:1px solid red; height:30px; width:100px;margin-top:20px;">
one
</div>
<input type="text" style="width:80px;margin-top:20px">
<br>
<br>
<a href="http://www.google.ru" focusable="true">EasyLink</a>
<br>
<br>
<input type="Button" style="width:80px" value="val" text="btn"/>
<br>
<br>
<input type="Checkbox" style="margin-top:20px" text="check"/>
<div tabIndex="0" style="border:1px solid green; height:30px; width:100px;margin-top:20px;" onfocus="removeSelections(event)"
onkeydown="alert('keydown on div green')"
two
</div>
<div tabIndex="0" style="border:1px solid blue; height:30px; width:100px;margin-top:20px" >
three
</div>
</body>
<script>
function removeSelections(e)
{
var s=e.target.ownerDocument.defaultView.getSelection();
s.collapseToStart();
}
</script>
