Как очистить фокус в javascript?

Я знаю, что это не должно быть так сложно, но я не смог найти ответ на Google.

Я хочу выполнить кусок javascript, который очистит фокус от любого элемента, на котором он находится, не зная заранее, какой элемент находится в фокусе. Он должен работать с firefox 2, а также с более современными браузерами.

Есть ли хороший способ сделать это?

Ответ 1

Ответ: document.activeElement

--- редактировать ----

Технически: document.activeElement.blur()

---- edit 2 ----

function onElementFocused(e)
{
    if (e && e.target)
        document.activeElement = e.target == document ? null : e.target;
} 

if (document.addEventListener) 
    document.addEventListener("focus", onElementFocused, true);

Ответ 2

.focus(), а затем .blur() что-то еще произвольное на вашей странице. Поскольку только один элемент может иметь фокус, он переносится на этот элемент и затем удаляется.

Ответ 3

document.activeElement.blur();

Не работает в IE9 - он размывает все окно браузера, если активным элементом является тело документа. Лучше проверить этот случай:

if (document.activeElement != document.body) document.activeElement.blur();

Ответ 4

dummyElem.focus(), где dummyElem - скрытый объект (например, имеет отрицательный zIndex)?

Ответ 5

Вы можете вызвать window.focus();

но перемещение или потеря фокуса неизбежно мешает любому, использующему клавишу табуляции, обойти страницу.

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

Ответ 6

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

Поэтому это было бы предпочтительным:

if (document.activeElement instanceof HTMLElement)
    document.activeElement.blur();

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

Ответ 7

если у вас есть верхнее меню с "активным" классом в элементе, вы можете использовать его:

$(".menu-header:first").find(".active").focus();

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

<div class="menu-header" data-bind="invisible:isVisible">
                <ul class="nav navbar-nav navbar-header">
                    <li><a class="nv" href="/Home" id="home-menu"><span><i class="fa fa-home"></i></span>Hjem</a></li>
                    <li><a class="nv active" href="/nb-no/CV" id="cv-menu"><span><i class="fa fa-pencil-square-o"></i></span>CV</a></li>
                    <li><a class="nv" href="/myjobapps" id="app-menu"><span><i class="fa fa-files-o"></i></span>Søknader</a></li>
                    <li><a class="nv" href="/alladverts" id="jobs-menu"><span><i class="fa fa-search"></i></span>Jobber</a></li>
                    <li><a class="nv" href="/Options" id="option-menu"><span><i class="fa fa-ellipsis-h"></i></span>Mer</a></li>
                </ul>
            </div>

Ответ 8

С jQuery это просто: $(this).blur();