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

Ответ 1

window.location.hash = '#tries';

Это приведет к прокрутке к рассматриваемому элементу, по существу, "сосредоточив" его.

Ответ 2

Да - это возможно. Чтобы сделать это, вам нужно назначить tabindex...

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

В tabindex из 0 будет помещен тег "в порядке естественного вклада страницы". Более высокое число даст ему определенный порядок приоритета, где 1 будет первым, 2 секундой и т.д.

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

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>

Ответ 3

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

Ответ 4

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

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

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

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

Ответ 5

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

Ответ 6

Я хотел предложить что-то вроде Майкла Шиммина, но без hardcoding вещей, подобных элементу, или 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;
}

Ответ 7

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

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

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

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

Ответ 8

Попробуйте это -

$("html, body").stop().animate({ scrollTop: $("#inner").offset().top - 80 }, 1500, "easeInOutExpo"), e.preventDefault();