Показать сообщение отдельно
  #1 (permalink)  
Старый 03.09.2009, 10:22
Интересующийся
Отправить личное сообщение для spa_2002 Посмотреть профиль Найти все сообщения от spa_2002
 
Регистрация: 03.09.2009
Сообщений: 11

Как убрать выделение в Опере у div, получившего фокус ?
День добрый всем!

Задача : 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>
Ответить с цитированием