Можно ли сфокусироваться на <div> с помощью функции JavaScript focus ()?


227

Можно ли сосредоточиться на <div>использовании focus()функции JavaScript ?

У меня есть <div>тег

<div id="tries">You have 3 tries left</div>

Я пытаюсь сосредоточиться на вышесказанном, <div>используя:

document.getElementById('tries').focus();

Но это не работает. Может ли кто-то предложить что-то ....?


3
Что вы хотите, чтобы это произошло? Div не принимает входные данные, так что вы хотите мигать границы или фоновую подсветку и т. Д.?
Майкл Шимминс

@ Майкл, да, мне нужен этот <div>, чтобы привлечь внимание пользователя ...
OM The Eternity


1
@MichaelShimmins и другие элементы <div> могут принимать входные данные, если для contenteditable установлено значение true. (Причина, почему я спросил)
MattOlivos

1
@MichaelShimmins divможет принимать ввод, если они переполняются и отображать полосу прокрутки. Когда divфокус с ползунком прокручивается, клавиши со стрелками прокручивают его содержимое (вместо содержимого других элементов, например body).
Рори О'Кейн

Ответы:


101
window.location.hash = '#tries';

Это позволит перейти к рассматриваемому элементу, по сути, «сфокусировав» его.


2
@Casey Chu: Работает нормально в ie, но не в firefox, есть идеи?
Хасиб Ахтар

Это не работает в некоторых версиях Chrome ... Однако, решение @vinoths делает это
Charliemops

1
Это работает, но ... с Angular у вас будут проблемы !!
Карлос Вердес

@CarlosVerdes; Есть ли решение для Angular?
Mac Vicious

3
не отвечая на вопрос «фокус», это не должен быть правильный ответ. в моем случае я хочу сосредоточиться на div 'contentEditable', и ваш трюк не поможет.
Арнаудамбро

453

Да, это возможно Для этого вам нужно назначить tabindex ...

<div tabindex="0">Hello World</div>

Табличный индекс 0 будет помещать тег «в естественном порядке табуляции страницы». Более высокое число придаст ему определенный порядок приоритета, где 1 будет первым, 2 секунды и так далее.

Вы также можете задать tabindex -1, что сделает div доступным только для сценария, а не для пользователя.

document.getElementById('test').onclick = function () {
    document.getElementById('scripted').focus();
};
div:focus {
    background-color: Aqua;
}
<div>Element X (not focusable)</div>
<div tabindex="0">Element Y (user or script focusable)</div>
<div tabindex="-1" id="scripted">Element Z (script-only focusable)</div>
<div id="test">Set Focus To Element Z</div>

Очевидно, обидно иметь элемент, который вы можете сфокусировать с помощью скрипта, который вы не можете сфокусировать с помощью другого метода ввода (особенно, если у пользователя только клавиатура или аналогичные ограничения). Существует также целый ряд стандартных элементов, которые по умолчанию фокусируются и содержат семантическую информацию, помогающую пользователям. Используйте эти знания с умом.


6
@Michael Shimmins, Это позволяет элементу быть фокусирования (в нестандартном пути!) С focus().
Стрэджер

2
@Olical - я уверен, что именно это и сказано в последней строке. Дайте мне знать, если вы считаете, что существует проблема, требующая редактирования.
Фентон

2
Если бы не было ясно, добавляя tabindexк элементу сделает его Focusable, что позволяет focus()и blur()методы, а затем вы можете вызвать фокус , как это:document.getElementById('tries').focus();
плов

4
Привет @ SteveOwen - кажется, все еще работает в Firefox v42. Я добавил фрагмент к этому ответу, чтобы вы могли запустить его и проверить.
Фентон

9
@SteveOwen использование window.location.hash = ...это способ сделать это. Фокус не означает «привлечь внимание», это просто означает, что нужно сосредоточиться на этом элементе.
Фентон

76

document.getElementById('tries').scrollIntoView()работает. Это работает лучше, чем window.location.hash когда вы зафиксировали положение.


2
Обратите внимание, что это решение не будет работать в IE, Opera или Safari.
AlecRust

1
Я только что попробовал это в Chrome 65, и он не работает. Перекрывающий div прокручивается, но фокус все еще находится в фоновом div. Единственный надежный способ, который я знаю, - это иметь элемент tabbable (с использованием tabindexатрибута) в оверлейном focus()элементе div и использовать его вместо этого.
августа

@ om-the-eternity уже заявил, что он хочет, чтобы div привлекал внимание пользователя, поэтому ему нужно не сосредоточить (даже когда это неправильно работает) div, а вывести его на экран , это решает, что
Омар Васкес

Если я делаю это в Chrome, он продолжает прокручивать обратно в все еще сфокусированное поле ввода. Особенно, если страница еще не загружена.
Роджер Крюгер

37

Вы можете использовать tabindex

<div tabindex="-1"  id="tries"></div>

Значение tabindex может привести к интересному поведению.

  • Если задано значение «-1», элемент не может быть вставлен во вкладку, но фокус может быть дан элементу программно (используя element.focus ()).
  • Если задано значение 0, элемент может быть сфокусирован через клавиатуру и попадает в поток вкладок документа. Значения больше 0 создают уровень приоритета, причем 1 является наиболее важным.

1
Вау, спасибо, классный трюк. Спасибо! Я бы не понял это иначе.
AVProgrammer

Спасатель жизни, спасибо. В Edge div может быть сфокусирован, но без Chrome без этого трюка. Принятый ответ отличный, но я не хочу дополнительную часть в URL.
Cal

сохранить жизнь. Работает хорошо с Chrome и Firefox
Susampath

14
<div id="inner" tabindex="0">
    this div can now have focus and receive keyboard events
</div>

Это работает для меня в Chromium / Chrome 46 только в сочетании с$('#inner').focus();
TNT

2

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

Я использую только jQuery для добавления / удаления класса, если вы не хотите использовать jquery, вам просто нужна замена для add / removeClass

--Javascript

function highlight(el, durationMs) { 
  el = $(el);
  el.addClass('highlighted');
  setTimeout(function() {
    el.removeClass('highlighted')
  }, durationMs || 1000);
}

highlight(document.getElementById('tries'));

--CSS

#tries {
    border: 1px solid gray;
}

#tries.highlighted {
    border: 3px solid red;
}

1

document.getElementById('test').onclick = function () {
    document.getElementById('scripted').focus();
};
div:focus {
    background-color: Aqua;
}
<div>Element X (not focusable)</div>
<div tabindex="0">Element Y (user or script focusable)</div>
<div tabindex="-1" id="scripted">Element Z (script-only focusable)</div>
<div id="test">Set Focus To Element Z</div>


0

Чтобы сделать мигание границы, вы можете сделать это:

function focusTries() {
    document.getElementById('tries').style.border = 'solid 1px #ff0000;'
    setTimeout ( clearBorder(), 1000 );
}

function clearBorder() {
    document.getElementById('tries').style.border = '';
}

Это сделает границу сплошным красным на 1 секунду, а затем удалите ее снова

Используя наш сайт, вы подтверждаете, что прочитали и поняли нашу Политику в отношении файлов cookie и Политику конфиденциальности.
Licensed under cc by-sa 3.0 with attribution required.