Как сфокусировать флажок HTML в IE, чтобы он приобрел интерес

Question

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

<script type="text/javascript">
    function doIt(){
        document.getElementById("theCheckbox").focus();
    }
</script>

<input type="button" onClick="doIt()" value="Push Me">
<br/>
<input type="checkbox" id="theCheckbox">

Нажатие кнопки «Нажми меня» приводит к тому, что флажок получает фокус. Я знаю это, потому что флажок становится установленным, если вы нажмете пробел после нажатия кнопки. Однако ни в коем случае этот флажок не выделен. Тип подсветки, о котором я говорю, по-видимому, работает в IE естественным образом при следующих обстоятельствах ...

Нажимайте клавишу Tab, пока кнопка «Push Me» не будет выделена пунктирной линией. Теперь снова нажмите кнопку «Push Me». Флажок должен быть обведен пунктирной линией, которую я пытаюсь создать программно (без необходимости возиться, нажимая сначала клавишу Tab).

Изображение желаемого эффекта, которого я могу достичь только после того, как связался с клавишей Tab:

Все это было сделано в IE7.

Answer 1

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

Если я сначала выделил на вкладке любой элемент на странице (т. Е. Не обязательно флажок) и , то нажал кнопку, выделение фокуса сработало, как ожидалось.

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

Answer 2

То, что вы могли видеть, - это различные реализации браузером того, как флажок выделяется, когда он имеет фокус.

На какой конкретно браузер вы ссылались?

В FireFox выделенный флажок имеет небольшую оранжевую рамку с очень слабой пунктирной линией.

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

Answer 3

У меня нет IE7, но попробуйте это ... (работает в IE6 с Wine)

<script type="text/javascript">
    function doIt(){
        document.getElementById("theButton").blur();
        document.getElementById("theCheckbox").focus();
    }
</script>

<input type="button" id="theButton" onClick="doIt()" value="Push Me">
<br/>
<input type="checkbox" id="theCheckbox">